Basic Padding Knowledge

Question

I have 3 column box on the middle of the page with following CSS codes:

.sectionLeft, .sectionMiddle, .sectionRight { float: left; width: 31%; height: 50px; padding: 1%; background-color: red; }

It is perfectly okey though I wonder that when I try to change padding to 6% it suddenly becomes out of page. I thought because of 3 column, there will be 6% empty space. Am I wrong? I know it is hard to explain but can someone clarify it for me?

Like this: Column 1: Left %1 - Right 1% Column 2: Left %1 - Right 1% Column 3: Left %1 - Right 1%

So basically we must have had 6% of space.

@Maverick you see padding: 1% here: imgur.com/a/oHBsI and padding: 6% here: imgur.com/a/exoen — Mehmet
– Mehmet, Commented Jan 17, 2017 at 20:27

Syden · Accepted Answer · 2017-01-17 20:36:28Z

This is because div's by default have box-sizing: content-box; which mean:

Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

Therefore they push the content when you add padding.

How to prevent this?

box-sizing: border-box; which means:

The width and height properties (and min/max properties) includes content, padding and border, but not the margin

See the snippet below for a comparison:

* { margin: 0; padding: 0; } .sectionLeft, .sectionMiddle, .sectionRight { float: left; width: 33.3%; height: 50px; padding: 6%; background-color: red; border: white 1px solid; /* boder-box includes padding */ box-sizing: border-box; } .sectionOther { float: left; width: 33.3%; height: 50px; padding: 6%; background-color: red; border: white 1px solid; /* content box doesn't include padding therefore it overflows */ box-sizing: content-box; }

<!-- these are box-sizing: border-box --> <div class="sectionLeft">stuff</div> <div class="sectionMiddle">stuff</div> <div class="sectionRight">stuff</div> <!-- these are box-sizing: content-box --> <div class="sectionOther">stuff</div> <div class="sectionOther">stuff</div> <div class="sectionOther">stuff</div>

You can find more info about box-sizing property here

Matt Spinks · Accepted Answer · 2017-01-17 20:32:07Z

You need to keep it at 1%. The padding is set on the left and right sides of each of the div's. So that's a left and right padding (2) for each of the 3 divs, which equals 6 "implementations" of the padding you specify. All of the padding needs to add up to 6% in total, which it does when you set it to 1% (1% * 6 = 6%). If you try to set it to 6%, then the total padding would be 6% * 6 = 36%, and added to your other 3 31%, that's a total of 129%.

Maverick · Accepted Answer · 2017-01-17 20:36:48Z

I get the confusion and its really stupid how browser calculate it.

For example if you set the box with to 100px and add 10px padding left and right the box size will be 120px padding-left + width + padding-right.

Really stupid thing, what you need to do is change the algorithm of calculation the box model. You do that with box-sizing property in CSS.

box-sizing: border-box;

Working example

Mac · Accepted Answer · 2017-01-17 21:57:40Z

In your example, padding of child elements is set as a percentage, and that percentage is calculated from the size of the parent container (whether a parent DIV or perhaps the entire page itself).

.container { width: 1000px; background: grey; height: 500px; } .sectionLeft, .sectionMiddle, .sectionRight { float: left; width: 31%; height: auto; padding: 1%; background-color: red; }

I've added a class for a parent div ("container"). We will modify its width, so that you can visualize the effect it has on enclosed elements.

With the width of parent container arbitrarily set to 1000 pixels, and the padding of each child expressed as 1%, each child element will have 10 pixels of padding (1000 * .01 = 10). The width of each child element is 310 pixels (31%). That's 930 pixels of content, plus 60 pixels of total padding (10 pixels on either side of three elements), for 990 pixels of used width in a parent that provides 1000 pixels total. See codepen.

Now, when we change the padding to 6%, we will have 60 pixels of negative space surrounding each child element (instead of 10), for a combined total of 360 pixels (60 pixels on either side of each child (120), times 3 child elements). The 930 pixels of content added to the 360 pixels of total padding (1290) blows past the 1000 pixel width of the parent container, breaking the 3-column layout. See codepen.

So you can see that the 1% padding of the first codepen (60 pixels total) is not the same as the 6% padding of the second codepen (360 pixels total), because the padding is derived from the width of the parent.

Collectives™ on Stack Overflow

Basic Padding Knowledge

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related