Lesson: Percentages: Height & Width

Today I came across a lesson Percentages: Height & Width

Link: Percentages: Height & Width

At the bottom I read a section that said:

Note: Because the box model includes padding, borders, and margins, setting an element’s width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin.

The part that stuck out to me was:
'“While tempting, 100% should only be used when content will not have padding, border, or margin.”

I then began to think "wait did I not learn we could use “box-sizing: border-box” which states:

In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.

Link: Box Model: Border-Box

So really should it not say:
'“While tempting, 100% should only be used when content will not have margin.”?

Or does box-sizing: border-box sometimes not work when conditions (padding, border, and margins) are used?

Or am I just overthinking the lesson and this is just a general statement on “Percentages: Heights & Width”?

Thanks for any feedback in advance!
-cheers-

Box sizing only applies to borders and whether they are calculated in the content box or not. It they are, then 100% width is fine so long as there is no padding or margin. It stems from which part of the box model are we calculating from and padding, especially throws a wrench into that.

The wording is sufficient for us to get the idea that there are extenuating circumstances that can mess up our design if we don’t take into account all the critical factors. We can use 100% width when all those factors are well in hand.


When it comes to height, we can always expect something wonky when using percentage, at least that was our experience in the past. It took hacks to prevent the vertical scrollbar, for instance. Look for an alternative when it comes to height.

So then box-sizing: border-box; only works when container has a fixed size in hard code or exact dimensions?

Reference:

Pixels, however, are fixed, hard coded values.
Link: Relative Measurements

CSS & HTML Example:

<!DOCTYPE html>
<html>
<head>
<style>
/* restricting body size for demonstration purpose only  */
body {
max-width: 200px;
max-height: 350px;
border: 3px solid #ddd;
}

/*container holding examples*/
#container{
box-sizing: border-box;
max-width: 120px;
max-height: 300px;
margin: 0 auto;
border: 1px dotted #ddd;
}

/* Example 1: setting width with pixel */
.hard_code {
  box-sizing: border-box;
  width: 100px;
  background-color: blue;
  padding: 2rem;
  margin: 1rem auto;
}

/* Example 2: setting width with percent */
.relative_code {
  box-sizing: border-box;
  width: 100%;
  background-color: aqua;
  padding: 2rem;
  margin: 1rem auto;
}
</style>
</head>
<body>
<div id="container">
<div class="hard_code"></div><!--Example 1-->
<br>
<div class="relative_code"></div><!--Example 2-->
</div>
</body>
</html>

If you use this example the only difference I see is class=“relative_code” stretches to the maximum allowed width within the containing space. I also included margins to test theory of;

“While tempting, 100% should only be used when content will not have padding, border, or margin.”

Yet still both examples of “hard code and relative code” or “exact size and responsive size” work. Am I missing something in the lesson?

Image:
container_test

So long as you understand the effect that padding can have, you’re half way there. I wouldn’t spend too much time trying to make something of the lesson narrative. We cannot speak for the author and this doesn’t bear that great an analysis. Just remember that padding is not your friend.

1 Like