Le 14 juil. 2012 à 11:25, John a écrit :
> Why is #1 twice as high as #2? Thank you! John
>
> #1:
> #header{
> margin:30px auto;
> width:1024px;
> height:auto;
> border-radius:5px;
> background-color:silver;
> border: 1px solid black; /* this one has a 1px border */
> }
>
>
> #2:
> #header{
> margin:30px auto;
> width:1024px;
> height:auto;
> border-radius:5px;
> background-color:silver; /* this one has no border */
> }
You'll need to give some more information…
What is the html content of #header ? If the content is inline-level and only
inline-level, there is no reason for a difference. If the content is
block-level however, there could be a couple of reasons. One of them could be
the margins (top/bottom) on that block-level content. In the second case, they
will collapse through the top/bottom edge of #header. In the first case, those
margins will contribute to the (visual) height of the parent block.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
