Question

我正在尝试将50px移到margin-top: 50px下方，但#section与*{ padding:0; margin:0; } body { width:100%; font-family:"Source Sans Pro" } #section { height:400px; background-color:#383838; color:White; } span { font-size:40px; } .column { width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px; }一起移动。为什么这样以及如何解决？

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

       myLoader.loadComponentConfig(configPath)
      .then(components => { self.Components = components;
         components.map(comp => {
             self.RouterComponents.push(
                 {
                     path: '/' + comp.name,
                     component: comp,
                     as: comp.name
                 }
             )});
             router.config(self.RouterComponents);
        });

Answer 1

您可以将padding-top: 50px应用于#section而不是margin-top至.column

从Mozilla文档引用：

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度，或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

了解更多详情，了解Margin Collapsing。

*{ padding:0; margin:0; }

body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White; padding-top: 50px; }
span{  font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

如果您想使用margin-top，请将display:block提供给父div，将display:inline-block提供给子div。

请参阅here

更多信息阅读here

已编辑的CSS

* {padding：0;余量：0; }

body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White;display:block; }
span{  font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;  margin-top:50px;display:inline-block;}

Answer 3

您应该在小提琴中使用padding-top #section，并从小孩中删除margin-top。由于margin s会相互折叠，因此最好不要将它用于定位元素。请参考：Margin goes outside div when border is removed

#section {
   padding-top: 40px;
   ...
}

另一种方法是使用相同的代码，但将overflow:auto添加到#section，如下所示：

#section {
   overflow:auto;
   ...
}

还有另外一种解决方案，就像在父级上使用边框一样，但由于我们使用边距进行定位，所以这些更像黑客。

*{ padding:0; margin:0; }

body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; padding-top:50px;}
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px;  }

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

margin-top与#section div一起移动？

3 个答案: