Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Ross Alejandro Bendal
Ross Alejandro Bendal
8,993 Points

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
231,269 Points
Steven Parker
Steven Parker
231,269 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,009 Points
jason chan
jason chan
31,009 Points

padding in internal space.

width is the width of the element.