CSS - 为什么margin-top改变父divs margin顶部？ [英] CSS - why does margin-top change the parent divs margin top?

问题描述

这是我的html：

 < div id =Header> 
< div id =logoContainer> 
< p id =welcome>欢迎< / p> 
< h1 class =logoText> first< img id =logoImagesrc =image.jpeg/>< span id =second>第二< / span> h1> 
< / div> 
< / div> 
  

这是我的CSS：

  #Header {
 font-family：consola; 
 width：100％; 
 height：50px; 
 background-color：black; 
 color：white; 
} 
 
 #logoContainer {
 height：50px; 
 width：200px; 
 background-color：red; 
} 
 
 #welcome {
 font-weight：500; 
 font-size：8px; 
 margin-bottom：-6px; 
} 
 
 #logoImage {
 width：14px; 
 vertical-align：-4px; 
 padding-left：5px; 
 padding-right：5px; 
} 
 
 .logoText {
 font-size：12px; 
 font-weight：500; 
} 
 
 
 #second {
 font-weight：500; 
} 
  

现在，当我更改

  #logoContainer 
  

到

  #logoContainer {
 height：50px; 
 width：200px; 
 background-color：red; 
 margin-top：100px; // add a margin-top of 100px 
} 
  

  #Header 
  

<$ c $ p> #logoContainer


b $ b

获取100像素的顶部

。我如何提供

  #logoContainer 
  

$

解决方案

总共重新编辑。b
$ b

规则＃1 - 当静态或相对显示元素中的两个垂直边距相遇时（例如，两个块元素之间的底部和顶部边距正常流），两者中较小的一个消失。

规则＃2 - 如果包装父容器没有任何填充或边框，到它的顶部边缘和它的第一个孩子的顶部边缘（并且与最后一个孩子和底部边缘相似）。较小的一个消失，较大的一个代替它。因此，在DIV中没有填充的10px边距的P标签或边框实际上会将父DIV标签向下推，就像父div有自己的10px顶边距一样。如果父div有自己的15px边缘，但没有填充或边框，它就好像P标签的边缘消失了。 1px padding or border on the parent，but will stop this behavior because the two margins are no longer to contact in another other。

IMO，规则＃1是伟大的。你基本上可以有一堆内容元素，并且总是确定更大的空白需要将被观察，而没有任何加倍。

此外，IMO，规则＃2臭。它不会像你想象的那么频繁，但它的确是一个有点麻烦，当它和仍然的原因，我有时只在顶部或底部在某些类型的布局场景。

This is my html:

<div id="Header">
    <div id="logoContainer">
        <p id="welcome">Welcome</p>
        <h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
    </div>
</div>

and this is my CSS:

#Header {
    font-family: consola;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
}

#logoContainer {
    height: 50px;
    width: 200px;
    background-color: red;
}

#welcome {
    font-weight: 500;
    font-size: 8px;
    margin-bottom: -6px;
}

#logoImage {
    width: 14px;
    vertical-align: -4px;
    padding-left: 5px;
    padding-right: 5px;
}

.logoText {
    font-size: 12px;
    font-weight: 500;
}


#second {
    font-weight: 500;
}

Now, when I change

#logoContainer

to

#logoContainer {
    height: 50px;
    width: 200px;
    background-color: red;
    margin-top: 100px; // add a margin-top of 100px
}

the

#Header

and the

#logoContainer

get a margin-top of 100px

. How do I just give

#logoContainer

a margin-top of 100px?

解决方案

Total re-edit. So here's the deal with vertical margins.

Rule #1 - when two vertical margins in static or relative display elements meet (e.g. a bottom and top margin between two block elements in normal flow), the smaller of the two disappears.

Rule #2 - If a wrapping parent container doesn't have any padding or border, the same collapse thing thing happens to its top margin and its first child's top margin (and similar with last child and bottom margin). The smaller one disappears and the larger one takes its place. So a P tag with a 10px margin inside a DIV with no padding, or borders will actually push that parent DIV tag down as if the parent div had its own 10px top margin. If the parent div had had its own 15px margin but no padding or border, it would have been as if the P tag's margin had disappeared. 1px padding or border on the parent, however will stop this behavior because the two margins are no longer coming into contact with one another.

IMO, Rule #1 is great. You can basically have a bunch of content elements and always be certain that the larger whitespace need will be observed without any doubling up.

Also IMO, Rule #2 stinks. It doesn't come up quite as often as you'd think but it's really a bit of a nuisance when it does and still the reason I will sometimes only use margins on top or bottom in certain types of layout scenarios.

这篇关于CSS - 为什么margin-top改变父divs margin顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！