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 trialAndrew Helton
4,681 PointsUsing 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
4,752 PointsThe 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
4,681 PointsThanks 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
4,752 PointsIn 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
4,681 PointsHi 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
4,752 PointsAre you good to go on this one?
Andrew Helton
4,681 PointsYep. I messed around on CodePen for a while and it all makes sense now :0