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


Sam Hayward
Sam Hayward
11,673 Points

Flexible margins/padding with undefined context widths?

This generally refers to 'Build a Responsive Website' project > Creating a Fluid Foundation.

By the start of the 'scalable images' video you are expected to have converted all of the margins and padding to percentages.

As I understand it: Margins are found by using the parents element's context Padding is found using the element itself as a context.

I can find the percentages for some of the margins. For example the <p> with class .btn is contained within a div with class grid_9, which means the containing element of the button has a width of 745px (grid_9 when the container div is at it's max width of 1000px)

However the 'ul.nav li' has a margin-right of 40px, the containing div being the <ul>. As far as i can tell, the ul element's size is just determined by its content ( its list items ). So what do you do?

Similarly when trying to convert the padding for the .btn class, you need the width of the <p> with the class .btn. Again, i think this is just determined by the length of the text filling the <p>, and so you have no defined width value to work with. What do you do?

Any feedback would be greatly appreciated =)

1 Answer

Patrick Metcalfe
Patrick Metcalfe
Courses Plus Student 7,563 Points

Well the first thing to remember about ul is that as a block level element without a user-set width fits to its parent. The margin of a li should be in relationship to yes it parent, but because it's parents default width is 100% it should really be in relationship to its grandparent's width. About your padding question. I'll start short: the project doesn't require you to change the padding of .btn. Because(longer explanation): your right, setting the padding in percentage on an element with a variable width is tricky. This problem is usually avoided by not setting the padding in % for these elements at all. Elements that fit to content(in the traditional sense) are inline-elements like the <a class="btn"> in your code. Padding is not commonly set on inline elements because inline elements only respect the horizontal padding(inline elements do not follow any horizontal related properties like height, padding-top, top, bottom, etc), thus it looks strange to set it. It's important to remember that inline elements are supposed to flow with what is next to it. Like an <a> in the middle of a paragraph it's a different element yes, but to the reader it's a word in a sentence. And separating it with padding and margin defeats the purpose of that. If you want a group of items to be adjacent to each other, but be there own thing(like tabs in a horizontal nav bar) then you can use alternatives like an inline-block element which is like a block but without the line breaks(put simply). The CSS working group is discussing a draft that would allow units based on content (http://caniuse.com/#feat=intrinsic-width). I know this is a bit long but I really hope it helps.

Sam Hayward
Sam Hayward
11,673 Points

This is great, thank you so much ;)