Question

无法理解如何在包装元素中设置边距。例如我有

<body>
    <section id="main">
        <div id="video">

        </div>

    </section>
</body>


section#main{
    width: 960px;
    margin: 7% auto 0;
    background: #000;
    opacity: 0.86;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}

div#video{
    border: 1px solid red;
    width: 640px;
    height: 360px;
    margin: 10px;
}

enter image description here

如您所见 - 仅左右边距。

Answer 1

在某些情况下

Margin will collapse。为什么不使用填充？

Answer 2

您看到的是collapsing margins的示例。将overflow:auto;添加到section#main

<强> jsFiddle example

Answer 3

嗯：保证金：7％自动0 将呈现保证金：0自动，因为您的外部容器没有高度。

如何在部分设置保证金？

3 个答案: