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

Posted by jesseborden
jesseborden
11,623 Points

Invisible Margin

Hi Guys,

I'm building a site based of what I learned on the Front End Track. The issue I am running into is there seems to be a margin being added that I cannot see. When I highlight the div on Chrome Dev Tools, I see a pink margin area which is pushing the content, but there is no margin being computed. I provided a screen shot here: http://prntscr.com/6u82dq

Richard Nicholls
Richard Nicholls
1,301 Points

have you tried adding this to the top of the css file

  • { box-sizing: border-box; }
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Remember that all browsers give html elements default styles, including margins, padding, font type, font size, etc. You have to overwrite these values yourself, you can use a universal selector and then just remove all of margin and paddings from every element or you can specify the element that has said margin and just set it to 0. Setting it to border-box will only affect the padding I believe, I do not know if it supports margins as well as the goal of a margin is to push something away and doesn't visually increase the size of an element.

2 Answers

A.J. Kandy
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

Hmm. Without seeing more of the surrounding source code it's a bit hard to tell, but I'm guessing that the text DIVs above and below each box (presuming you're using icon fonts for the icons) are generating line breaks that may have an inherent margin. There's a thread here at Stack Overflow that seems to parallel what you're experiencing. Maybe try adding a new class to your CSS that invokes nowrap and tagging it on those items and see if it tightens it up?

http://stackoverflow.com/questions/4167569/how-to-remove-invisible-margin-created-by-line-break-in-source-code-on-inline-bl

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Remember that all browsers give html elements default styles, including margins, padding, font type, font size, etc. You have to overwrite these values yourself, you can use a universal selector and then just remove all of margin and paddings from every element or you can specify the element that has said margin and just set it to 0. Setting it to border-box will only affect the padding I believe, I do not know if it supports margins as well as the goal of a margin is to push something away and doesn't visually increase the size of an element.

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

Border-box just changes the way the total width is calculated including padding and the border. Margin is exterior to the box, so it is not included.

Yes, using a partial CSS reset is recommended. I generally always add a margin: 0; padding:0; at the top.

jesseborden
jesseborden
11,623 Points

Hi Dane,

Yes I set the margin to 0 in the CSS. The weird part about it is when I inspect the element, it shows that the margin being computed is zero.. Here's a more specific screen shot: http://prntscr.com/6u94yl

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

It could be that a child of element has margins or padding, or possibly it is inheriting those values from an outside parent