CSS padding


(Adeseyeair3s) #1

Hey Chris Mills,

Does padding take away from the content? in the grid module, I realized that you added 20px to the right hand of the wrapper, and noticed that the article claimed there is 980-20px = 960px remaining. How is this possible, especially when floats are on a new formatting context against the wrapper, which margins and padding should hold no effect.

Bests
adeseye


Learning web development: Marking guides and questions
(Chris Mills) #2

Hi Air3s,

padding and margin do still affect floats. As you’ll see on

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats

Margins are commonly used to make gutters in between columns in float multiple column layouts.

In the particular case you see on the Grids page, the padding subtracts from the total width rather than adding to it because we have set the box-sizing property to border-box on all elements. You can find an explanation at

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely

I have updated the grids page to explain this more clearly.


(Adeseyeair3s) #3

Ohhh, I mixed up something, its margins between floated and non floated items that got me.

So padding between the wrapper and its child elements will take effect?

Thank you!