Question

我有以下HTML

<body>
    <div class="template">
        <div class="box"></div>
   </div>
</body>

我的CSS

.template{
    height:500px;
    width:1000px;
    background-color:#e1bfbe;
    margin:0 auto;
}
.box{
    height:420px;
    width:165px;
    background-color:#ffffff;
    margin-left:416px;
    margin-right:417px;
    margin-top:37px;
    margin-bottom:38px;
}

现在我得到以下输出

enter image description here
但是当我在float:left;课程中添加.box时，我会得到以下图片

enter image description here

只有margin-top无法使用float:left;为什么我应该添加float:left来获取元素.box的上边距？

Answer 1

这是一个描述同一问题的主题：CSS margin terror; Margin adds space outside parent element

这是非崩溃边际的常见问题。

添加float: left的替代方法是overflow: auto

Answer 2

添加 display：inline-block; to .box class。

Answer 3

您的保证金正在父元素上使用，这是预期的行为。但是，有几种方法可以解决它......

解决方案1：浮动div ...这将包含子元素的边距并防止边距折叠。

解决方案2 ：您还可以在父div上添加不间断空格

<强> JSFiddle Demo

可以找到有关折叠边距的更多信息here。

Answer 4

只需添加display：inline-block;到你的盒子级别margin-top将再次活着！

JSFiddle

<强> CSS

.box {
    display:inline-block; /*Added */
    height:420px;
    width:165px;
    background-color:#ffffff;
    margin-left:416px;
    margin-right:417px;
    margin-top:37px;
    margin-bottom:38px;
}

Answer 5

试试这个我已经修改了你的风格

＆＃13;

html, body {
    margin:0;
}
.template {
    height:500px;
    width:100%;
    background-color:#e1bfbe;
    margin:0;
    float: left;
}
.box {
    height:420px;
    width:165px;
    background-color:#ffffff;
    margin: 37px auto;
}

＆＃13;

<div class="template">
    <div class="box"></div>
</div>

＆＃13;

HTML上的margin-top问题

5 个答案: