Geek Answers Handbook

Small gasket, big difference

If I add only a 1px padding to the div around the heading, then this seems to be a huge difference ( http://jsfiddle.net/68LgP/ ).

HTML:

<div class="pad0"> <h1>Text</h1> </div> <div class="pad1"> <h1>Text</h1> </div>

CSS

 .pad0 { background-color: #E9E9E9; padding: 0px; } .pad1 { background-color: #E9E9E9; padding: 1px; }

Why is this so? I really would like to achieve a similar effect for the 1px add-on, but without adding an extra add-on.

+6
source share
7 answers

This is due to collapse.

The upper and lower fields of blocks are sometimes combined (collapsed) into one edge, the size of which is the largest of the fields combined into it, a behavior known as collapse.

Further information can also be found on the w3c website .

Two fields are adjacent if and only if there are no [...] cells, no gaps, no laying , and no border separates them [...]

So, if you apply padding-top ( 1px enough), as in the second example, the fields will no longer collapse. An easy solution, as already suggested, is to remove the default margin of your header elements.

+7
source

See updated CSS here

 .pad0 { background-color: #E9E9E9; padding: 0px; margin: 0px; } .pad1 { background-color: #E9E9E9; padding: 1px; margin: 0px; } h1 { padding: 0px; margin: 0px; }
+1
source

Do this with the default CSS applied to the Heading1 element. He already has an additive / brand to him.

If you reset, you can see the result that you execute: http://jsfiddle.net/68LgP/8/ .

 h1 { padding: 0; margin: 0; } .pad0 { background-color: #E9E9E9; padding: 0px; } .pad1 { background-color: #E9E9E9; padding: 1px; }
+1
source

set h1 margin to 0

 h1 { margin: 0; }
0
source

Now it retains the h1 margin in the DIV. H1 has upper and lower margins by default around 21px, so when you add the 1px add-on to the DIV, it now looks like 22px

0
source

<div> is a block element, which means that it begins and ends with a line break. I believe this contributes to your problem - you might want to swap the <span> tags, although I'm not sure if this will solve the problem.

0
source

You can use CSS Reset , which resets all CSS settings, including such issues. Recommended for any site.
How can a CSS Reset file solve your problem? As you can see, in the first paragraph h1 is turned on, and it is given margin:0 , which is necessary to reduce the difference in problems like yours.

0
source

More articles:


All Articles