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 Techniques Display Modes Table Display

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Cant use margins on vertically align elements

Hello!

Would you happen to know why we can't use margins on elements that are displayed as table -cells.The instructor uses padding to move the main-nav from the main-logo, but I can't understand why we can't use margins on elements that are displayed as table -cells

In fact, do you have a good tip to remember these little exceptions that make a big difference.

thanks

4 Answers

Joshua Shroy
Joshua Shroy
9,943 Points

From my understanding, you cannot use margins on table-cells because they simply don't have them. The table itself has the space outside of it, where as cells only have padding. I look at it like the table itself is acting as one element and you are grouping other elements within it. Therefore, there is only margin around the table, but not around the individual cells.

Hope that helps!. I recommend using wiki and google images to visually see the structures of margins, paddings, tables, and table cells.

Gianni Zamora
Gianni Zamora
9,547 Points
Gianni Zamora
Gianni Zamora
9,547 Points

Margin is moving all the content to the (right,left,up,down) leaving basically a transparent column type thing to push the content in whatever direction This means it will move the table somewhere else on your page if that is your goal, but padding helps give the table more space in between because it inserting that padding inside the cell giving the text more space. You can still move your table and align it but that is very easy with (width,margin,position,etc. elements)

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hey guys, thanks! Joshua, what do you mean by google images to visually......, I thought you could only google words.

thanks

Joshua Shroy
Joshua Shroy
9,943 Points

I'm sorry that was confusing. I meant that you google margins and paddings and look under the "image" tab provided by Google. There are some very helpful images that people have created to visualize how these two functions work.

Hope that helps!

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Sorry guys for this delayed response; I think I am getting it. Cheers!