Height & Width in the Box Model
Looking at examples of how different elements interact with one another in regards to their width and height properties. Cases are grouped by like and ordered from simplest and most general, to most complex and specific.
Height Examples
Case 1: Total list Item height of all <li>s exceeds container fixed height
/* Example of li height greater than fixed height of ul
Result: <li>s will overflow beyond confines of <ul> unless changes are made to either 1) change overflow properties, or 2) reduce overall height of <li>s so that they do not billow over beyond the <ul> height */
article, section {
margin: 0 25px;
padding: 15px;
}
article {
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
height: 150px;
background: #96ceb4;
/* overflow: hidden; */
}
section li {
height: 50px;
background: #ffeead;
}
section li span {
font-weight: bold;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a new society of likeminded citizens (minions?) who enjoy bobsledding, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
</article>
The <li>’s extend beyond the bounds of the <ul> that contains them, because their height is greater than the height of their container, and although then cannot expand the fixed height of the container, they are not bounded by that height.
Overflow
If add `overflow: hidden;` to the <ul> that contains them, however, then we no longer see our complete list, as some of the <li>’s overflow, and thus are hidden. However, if we add `overflow: auto;` or `overflow: scroll’` we will see a scroll bar that will allow us to see the complete list, contained within the fixed height of the <ul>. This would be annoying on smaller devices, so I would not recommend utilizing `scroll` or `auto` in most cases.
Case 2: Total list Item height of all <li>s does not exceed container fixed height, however <li>s + padding for <li>s does exceed container fixed height
/* Example of total list item height of all <li>s does not exceed container fixed height, however <li>s + padding for <li>s does exceed container fixed height
Result: <li>s will overflow beyond confines of <ul> unless changes are made to either 1) change overflow properties, or 2) reduce overall height of <li>s + padding so that they do not billow over beyond the <ul> height */
article, section {
margin: 0 25px;
padding: 15px;
}
article {
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
height: 150px;
background: #96ceb4;
/* overflow: hidden; */
}
section li {
height: 30px;
padding: 10px 0;
background: #ffeead;
}
section li span {
font-weight: bold;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a new society of likeminded citizens (minions?) who enjoy bobsledding, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
</article>
What happens here is essentially the same as what happens in Case 1, when the total height is greater without regard to padding. This is because padding is the distance of contents of an element from its border, so adding padding onto an element will increase the overall size of the element.
Box-Sizing
Adding `box-sizing: border-box;` would curb this behavior, however, if the element has a fixed height (or width — but we are not treating width here), and the contents of the element + the padding exceed that height, then the element will again take up more space than the fixed height, even with the `box-sizing` property set to `border-box`.
Case 3: Total list Item height of all <li>s does not exceed container fixed height, however <li>s + margin for <li>s does exceed container fixed height
/* Example of total list item height of all <li>s does not exceed container fixed height, however <li>s + padding for <li>s does exceed container fixed height
Result: <li>s will overflow beyond confines of <ul> only if the net margin (thinking of the net margin between <li>s as margin-top of 2nd <li> subtracted from margin-bottom of 1st <li>, or vice-versa if the margin-top of the 2nd <li> is greater than the margin-bottom of the 1st <li>) between <li>s + the margin-top of the 1st <li> + margin-bottom of last <li> + <li> heights, is greater than the fixed height of the <ul> */
article, section {
margin: 0 25px;
padding: 15px;
}
article {
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
height: 150px;
background: #96ceb4;
/* overflow: hidden; */
}
section li {
height: 30px;
margin: 20px 0;
background: #ffeead;
}
section li span {
font-weight: bold;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a new society of likeminded citizens (minions?) who enjoy bobsledding, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
</article>
Here, the most important factor ends up being the “net margin”, as explained in the prediction in the code above. Because margin regards total distance from other elements, we cannot simply add the `margin-top` and `margin-bottom` to determine whether or not our <li>s will spill over. We must take into account the actual distance between <li>s and add that distance to our other measurements, not any overlapping margin between two given <li>s.
Case 4: List Item span is floated right and span height + padding exceeds container fixed height
/* Example of list item span is floated right, span height + padding exceeds fixed height of the <li> containing it, and total height + padding of all spans exceeds the height of the <ul>
Result: This is going to look odd. Because the <span> is floated right it will be all the way on the other side of the <li> element for each <li>. Since it's height + padding exceed the height of it's <li>, each <span> will force the <span> on the <li> below it to the left a little (that is, the <span> padding will extend into the <li> below, and occupy that space so that the other floated <span> cannot push all the way to the right). The <span> itself will be moved vertically due to the padding, but the <li>s will not move vertically in regard to the <span> padding */
article, section {
margin: 0 25px;
padding: 15px;
}
article {
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
height: 150px;
background: #96ceb4;
}
section li {
height: 20px;
background: #ffeead;
}
section li span {
float: right;
padding: 40px 0 50px 0;
font-weight: bold;
background: #ffcc5c;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a new society of likeminded citizens (minions?) who enjoy bobsledding, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
</article>
Because the <span> elements are floated right, one might expect them to all be aligned to the right.
Padding
However, since the `padding` acts to expand the element’s height, only the first <span> can align to the rightmost edge of the container, and the others end up taking a step-like formation.
Case 5: List items are floated left so that all <li>s are displayed on same line, span height + padding exceeds fixed height of the <li> containing it. <span> inside <li>s is floated right and clearfix is applied to <li> elements, and to <ul> element
/* Example of list items are floated left so that all <li>s are displayed on same line, span height + padding exceeds fixed height of the <li> containing it. <span> inside <li>s is floated right and padding is applied. Clearfix is applied to <li> and <ul> elements.
Result: This is going to make the <li>s that would otherwise sit inline at the top of their parent, displayed one line lower, as li:before has the property of `display: block`.
The <li>s' <span>s will float right and are dropped down according to their padding. The rest of the <li> and <ul> will remain unaffected and will not push any other content down. The <span>s sit in alignment with one another. If there were another line of text below them, they would sit over top of it and make the content difficult to read.
*/
article, section {
margin: 0 25px;
padding: 15px;
}
article {
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
height: 100px;
background: #96ceb4;
}
section li {
float: left;
height: 20px;
margin: 0 25px;
background: #ffeead;
}
section li span {
font-weight: bold;
background: #ffcc5c;
float: right;
padding: 40px 0 70px 0;
}
section li:before,
section li:after,
section ul:before,
section ul:after {
display: block;
content: "";
}
section li:after,
section ul:after {
clear: both;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span> wash</span> the car, </li>
<li><span> do</span> the dishes, </li>
<li><span> build</span> new society, </li>
<li><span> establish</span> 'New World Order', </li>
</ul>
<p>I am a mighty fine paragraph</p>
</section>
</article>
This was the one I had the most trouble with initially, since it involves multiple clearfixes. At first, I forgot the the `li:before` would affect where the <li>s sat vertically. It was immediately apparent why they dropped down a line once the clearfix was applied, but I simply had not considered how the `li:before`’s display property of `block` would affect the <li>s on the page.
A note that the clearfix was not given a class, because for this example it was easier to apply it to both the <li> and <ul> elements within <section>, rather than to add a class to all <li>s and to the <ul>. In most cases, this would not be the most efficient or effective way to define a clearfix.
Margin
Adding `margin` instead of `padding` does not change the effect, though `margin` does not show background (not noted above, but consistent with `margin` property in all examples as it is the boundary between an element and the next element, and sits outside of that element).
Width Examples
Case 1: Width of elements exceeds container fixed width
/* Example of width of elements exceeds container fixed width
Result: Elements will overflow beyond confines of container unless changes are made to either 1) change overflow properties, or 2) reduce overall width of elements so that they do not billow over beyond the <div> width */
article, section, aside {
margin: 0 25px;
padding: 15px;
}
article {
width: 800px;
background: #ff6f69;
}
section {
width: 600px;
background: #eee;
}
section ul {
width: 700px;
background: #96ceb4;
}
section li {
width: 600px;
background: #ffeead;
}
section li span {
font-weight: bold;
}
aside {
background: #646464;
}
aside p {
width: 850px;
background: #02aad5;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a new society of likeminded citizens (minions?) who enjoy bobsledding, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
<aside>
<h2>Biography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi tortor, varius eget convallis a, rutrum sit amet orci. Phasellus in iaculis quam. Nulla tristique leo metus, vitae varius tellus gravida quis. Maecenas nulla ligula, malesuada in turpis sit amet, aliquam ultrices nunc. Etiam interdum sagittis orci ut lobortis. Quisque tempor, risus sed imperdiet rhoncus, mauris augue commodo nibh, a finibus metus est vitae lacus. Nulla nibh odio, consectetur eu tellus non, aliquam porta metus. Pellentesque interdum eros id turpis varius, ut viverra felis dictum. Sed nisi neque, consectetur a facilisis eu, ullamcorper sed mauris. Etiam eget consequat leo. Ut lectus neque, ullamcorper in est vitae, posuere posuere nibh.<p>
</aside>
</article>
This is a basic example of the fact that CSS properties cascade and the lowest level takes precedence under normal circumstances.
Parent & Child (or container elements)
Adding the `overflow` property to the parent container does change how this is carried out on the page, but it does not change the actual width of the child, even if it changes how that child is displayed. The width of the child will overtake the width of the parent container, such that of the child will extend beyond the parent.
Case 2: Total <p> width does not exceed container fixed width, however <p>s + padding for <p>s does exceed <div> fixed width as well as total container width
/* Example of total <p> width does not exceed container fixed width, however <p>s + padding for <p>s does exceed <div> fixed width
Result: Elements will overflow beyond confines of container unless changes are made to either 1) change overflow properties, or 2) reduce overall width of elements so that they do not billow over beyond the <div> width. `box-sizing` could be utilized to change the overall width of the <p> element so that it did not extend beyond the parent container. */
article, section, aside {
margin: 0 25px;
padding: 15px;
}
article {
width: 800px;
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
background: #96ceb4;
}
section li {
background: #ffeead;
}
section li span {
font-weight: bold;
}
aside {
width: 600px;
background: #646464;
}
aside p {
width: 550px;
padding: 10px 100px;
background: #02aad5;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a new society of likeminded citizens (minions?) who enjoy bobsledding, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
<aside>
<h2>Biography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi tortor, varius eget convallis a, rutrum sit amet orci. Phasellus in iaculis quam. Nulla tristique leo metus, vitae varius tellus gravida quis. Maecenas nulla ligula, malesuada in turpis sit amet, aliquam ultrices nunc. Etiam interdum sagittis orci ut lobortis. Quisque tempor, risus sed imperdiet rhoncus, mauris augue commodo nibh, a finibus metus est vitae lacus. Nulla nibh odio, consectetur eu tellus non, aliquam porta metus. Pellentesque interdum eros id turpis varius, ut viverra felis dictum. Sed nisi neque, consectetur a facilisis eu, ullamcorper sed mauris. Etiam eget consequat leo. Ut lectus neque, ullamcorper in est vitae, posuere posuere nibh.
</aside>
</article>
This example illustrates the role of `padding` in the overall width of a block element. Nothing too complicated here. This is simply demonstrating that `padding` on the left and right are factored into the width in the same way they are for the height.
Display
If we were to make apply these same conditions to an `inline-block` or an `inline` element then the result would be the same. All are affected by horizontal `padding` and `margin`.
Case 3: Total <span> in <p> width does not exceed <p> fixed width, however <span> in <p>s + horizontal margin for <span>s does exceed <p> fixed width and container fixed width
/* Example of <span> width in <li> does not exceed <li> fixed width, however <span> + <span> margin in <li>s does exceed <li> fixed width.
Result: <span>s will overflow beyond confines of container only because of the horizontal margins. The width is not a factor for inline elements such as <span> */
article, section, aside {
margin: 0 25px;
padding: 15px;
}
article {
width: 800px;
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
background: #96ceb4;
}
section li {
width: 400px;
background: #ffeead;
}
section li span {
width: 200px;
margin: 0 390px;
font-weight: bold;
background: #ff6f69;
}
aside {
width: 600px;
background: #646464;
}
aside p {
width: 550px;
padding: 10px 100px;
background: #02aad5;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a new society of likeminded citizens (minions?) who enjoy bobsledding, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
<aside>
<h2>Biography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi tortor, varius eget convallis a, rutrum sit amet orci. Phasellus in iaculis quam. Nulla tristique leo metus, vitae varius tellus gravida quis. Maecenas nulla ligula, malesuada in turpis sit amet, aliquam ultrices nunc. Etiam interdum sagittis orci ut lobortis. Quisque tempor, risus sed imperdiet rhoncus, mauris augue commodo nibh, a finibus metus est vitae lacus. Nulla nibh odio, consectetur eu tellus non, aliquam porta metus. Pellentesque interdum eros id turpis varius, ut viverra felis dictum. Sed nisi neque, consectetur a facilisis eu, ullamcorper sed mauris. Etiam eget consequat leo. Ut lectus neque, ullamcorper in est vitae, posuere posuere nibh.
</aside>
</article>
This is demonstrating the fact stated in Case 3, that although `inline` elements are not affected by horizontal width, they are affected by horizontal margins. Similarly, if `padding` were used instead of `margin`, the <span> elements would push beyond the boundaries of their parent container.
Case 4: List Items are horizontal and floated left. <li>s’ <span>s are floated right and <span> width + padding exceeds container fixed width
/* Example of <li>s are horizontal via floating left. <li>s’ <span>s are floated right and <span> width does not exceed <li> fixed width, but <span> width + <span> margin does exceed <li> fixed width.
Result: <span>s will push content to a second line <li> because of the horizontal margins--depending upon the width of the rest of the contents of the <li>. <span> width will also factor in to pushing the rest of the <li> because when an element is floated, its display property becomes `block`, and so the `width` property is observed. Some <span>s therefore would push away from the content of the <li> and beyond their fixed width simply because of their width being added to the width of the rest of the <li> content */
article, section, aside {
margin: 0 25px;
padding: 15px;
}
article {
width: 1200px;
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
background: #96ceb4;
overflow: hidden;
}
section li {
float: left;
width: 190px;
margin: 10px;
padding: 15px 15px 15px 15px;
background: #ffeead;
list-style: none;
}section li span {
float: right;
width: 65px;
margin: 0 35px;
font-weight: bold;
background: #ff6f69;
}
aside {
background: #646464;
}
aside p {
width: 650px;
padding: 10px 100px;
background: #02aad5;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a society, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
<aside>
<h2>Biography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi tortor, varius eget convallis a, rutrum sit amet orci. Phasellus in iaculis quam. Nulla tristique leo metus, vitae varius tellus gravida quis. Maecenas nulla ligula, malesuada in turpis sit amet, aliquam ultrices nunc. Etiam interdum sagittis orci ut lobortis. Quisque tempor, risus sed imperdiet rhoncus, mauris augue commodo nibh, a finibus metus est vitae lacus. Nulla nibh odio, consectetur eu tellus non, aliquam porta metus. Pellentesque interdum eros id turpis varius, ut viverra felis dictum. Sed nisi neque, consectetur a facilisis eu, ullamcorper sed mauris. Etiam eget consequat leo. Ut lectus neque, ullamcorper in est vitae, posuere posuere nibh.
</aside>
</article>
Once elements are floated they become `block` displayed elements and `width` is now accounted for. In this instance, the width restriction of the <li>s, combined with the <span> `width` and `margin` pushes content in 3 of the 4 <li>s to a second line. If we wanted to display the <span> on the same line as the rest of the <li> we would have to make modifications to the width, padding, or margin to compensate.
Case 5: List Items are horizontal via `display: inline-block`, <span> is floated left, and <span> width does not exceed container width, but is not wide enough to fit <span> contents (in most cases)
/* Example of <li>s are horizontal via `display: inline-block`, <span> is floated left, and <span> width does not exceed container width, but is not wide enough to fit <span> contents (in most cases)
Result: Because floating an element allows it to take on `width` properties (by virtue of turning its `display` to `block`), the <span> width limits how much of the contents can be shown. It is sharing the total width of the <ul> with the <li>. Because we have not set the <span>s' `overflow` to anything, they will bleed into the <li>s where they are wider than the width we have set, unless we choose to change other horizontal properties (width, padding, border, margin) to give us more room.
*/
article, section, aside {
margin: 0 25px;
padding: 15px;
}
article {
width: 1200px;
background: #ff6f69;
}
section {
background: #eee;
}
section ul {
width: 700px;
background: #96ceb4;
}
section li {
display: inline-block;
background: #ffeead;
list-style: none;
overflow: hidden;
}
section li span {
float: left;
width: 30px;
font-weight: bold;
background: #ff6f69;
}
aside {
background: #646464;
}
aside p {
padding: 10px 100px;
background: #02aad5;
}...
<article>
<h1>Lists</h1>
<section>
<h2>Important Things to Do</h2>
<ul>
<li><span>wash</span> the car, </li>
<li><span>do</span> the dishes, </li>
<li><span>build</span> a society, </li>
<li><span>establish</span> 'New World Order', </li>
</ul>
</section>
<aside>
<h2>Biography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi tortor, varius eget convallis a, rutrum sit amet orci. Phasellus in iaculis quam. Nulla tristique leo metus, vitae varius tellus gravida quis. Maecenas nulla ligula, malesuada in turpis sit amet, aliquam ultrices nunc. Etiam interdum sagittis orci ut lobortis. Quisque tempor, risus sed imperdiet rhoncus, mauris augue commodo nibh, a finibus metus est vitae lacus. Nulla nibh odio, consectetur eu tellus non, aliquam porta metus. Pellentesque interdum eros id turpis varius, ut viverra felis dictum. Sed nisi neque, consectetur a facilisis eu, ullamcorper sed mauris. Etiam eget consequat leo. Ut lectus neque, ullamcorper in est vitae, posuere posuere nibh.
</aside>
</article>
The main takeaway here is that, again, the `overflow` property is necessary if an element is floated in order to ensure that contents do not bleed over, in case the `padding` or `margin` properties cannot account for the necessary space. Otherwise, that element could flow over and into surrounding elements.
