I’m trying to understand how padding works in the box model. In the lesson, the padding for .red-box is set to 20px which should render a 20px padding on all sides of the h5 element. But the horizontal paddings are obviously much larger than 20px.
Do the CSS rules of the parent/containing element (in this case the
Hello!
The problem here is that the element uses all available space instead of just what it needs. This means that on bigger screens it will look like it has more padding than what’s actually applied through CSS.
However, the box model is correct, as you can see using the developer tools of your browser (F12):
At the bottom right of the picture, where it says Box Model, you can see the entire width (327px), the height (15.2667px), the padding (20px around), the border (5px) and margin (top and bottom 22.1176 and 0 for left/right).
Note this is the expected behavior. In very simple words, applying a padding is like saying use all available space minus this padding, though it depends if the element/tag is displayed as a block (default for a hN elements) or inline.
Ah~ I see! It was the default of the element that was taking up more space than what the content needed. Thank you for the quick reply!
