I must be missing something very obvious

HTML-CSS
1

I read online that any element is display:inline and position:static by default ,and that then any width adjustments (width: 20%; ) will be ignored.
Also, I read that margin and width are not inherited.

This is my basic code (a snippet from a tutorial video that I’m watching).

<div class="container">
       <section>
	        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
			ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
			in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occ </p>
	   </section>
   </div>

*{
	margin:0;
	border:0;
	padding:0;
}
.container {
	/*default position:static  and display:inline, width should be ignored*/
	/*supposedly non-inherited width and margin */
	width: 50%;
	margin: 5%;
}

Yet the text margin and width are affected? I’m just stumped at this. The p element shouldn’t inherit margin , yet it does, as well as width, and width adjustments should be ignored?

Thanks.

2

Both <div> and <p> elements are block elements. You can tell this by the fact that if you have two div or <p> elements they sit on top of each other (each element starts a new line).

The <p> element is not inheriting the margin or width it is “conforming” to its container (i.e. not overflowing the container).

3

Thanks, So all elements are inline by default unless otherwise stated in the default browser css file , div and p are block etc?
But I still don’t understand how margin or width work in the children elements without inheriting ? Thanks in advance ! :slight_smile:

4

The concept is simple: there are 3 types of elements when it comes to the space that the elements would take, those are inline, block & inline-block. So, if you put inline element inside of a container it won’t stretch up to fill all the horizontal space, but if U put block elements they take all the horizontal space of their parent. Maybe u r asking what about inline-block ones, they have a slight difference with inline ones, the inline ones won’t accept CSS property like width and height unless U change them to inline-block or block elements.
Examples for each type:
div, p, ul, li … block
a, span … inline
Img, input … inline-block try to play with them to get the core idea