CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Padding vs width?

In an instance where I created a new h1 as a title and I want to expand it width, what is are the downsides of using left and right padding? In this video, Guil used width to widen the h1. I had a different idea, I used padding. It also worked as intended, visually.

Is there any downsides in using padding vs width on this instance? I just want to make sure I got it right.

2 Answers

Steven Parker
Steven Parker
203,989 Points

The width setting acts independently from the element contents, but padding adds to the contents. The situation should determine which to use. Do you want a specific size, or want the size to be relative to the contents? Also padding may have an effect on content alignment within the element.

For example, if you have set width of a flowed element (but note that h1's are block by default), changing the font size will not affect the element width, but if you have set padding instead, it will.

:sparkles:

jason chan
jason chan
31,004 Points

padding in internal space.

width is the width of the element.