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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Andrew Helton
Andrew Helton
4,681 Points
Posted by Andrew Helton
Andrew Helton
4,681 Points

Using percentage as padding/margin/width

I have a question about how padding/margin/width is calculated when using percentages. Let's say I have this HTML:

<ul>
  <li><a href="www.example.com">Example Goes Here</a></li>
</ul>

And in CSS I have this:

ul {
  list-style:none;
  }

ul li {
  display: inline-block;
  }

ul li a {
  padding: 15px 10%;
  }

How would the 10% padding be calculated? Would the 10% be relative to the length of text in the a tag? Or would it be relative to the width of the list item since the list item is the parent of the a tag?

Also, would the answer to the above question be same for both margin and width?

Thanks, Andrew

6 Answers

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

The percentage is always relative to the size of the parent unit. The box model can be a little complicated. I believe in using this trick to make calculating margin and padding much easier.

The basics are adding this to the top of your stylesheet:

* {
box-sizing: border-box;
}

You'll need to read the article to get the cross browser answers.

Andrew Helton
Andrew Helton
4,681 Points
Andrew Helton
Andrew Helton
4,681 Points

Thanks for the prompt response and for the helpful link/suggestion. Just to clarify, in the example I provided the <li> is the parent of the <a>, so therefore the 10% left and right padding will be calculated based on the width of the <li>. Is this correct?

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

In that case it is based on the width of the text in the a tag. Just take the example text you provided and put a long string of text in there, then reduce it to a single letter in the a tag. It should be more clear to you when you see how it functions. You're response lost all the tags you typed so I'm not exactly clear on the question but hopefully this answers it.

Andrew Helton
Andrew Helton
4,681 Points
Andrew Helton
Andrew Helton
4,681 Points

Hi Kiko,

Thanks for your help. I apologize for the HTML tags not showing up. I didn't see the 'markdown cheatsheet' when I originally posted. I have updated my original post and it now reflects those changes.

Kiko Doran
Kiko Doran
4,752 Points
Kiko Doran
Kiko Doran
4,752 Points

Are you good to go on this one?

Andrew Helton
Andrew Helton
4,681 Points
Andrew Helton
Andrew Helton
4,681 Points

Yep. I messed around on CodePen for a while and it all makes sense now :0