Question

因此，如果我增加#featured的上边距，它会从头部向下拉高度。我做错了什么？

例子。如果我将#featured {margin：0 auto}更改为#featured {margin：20px auto}，标题的白色将以20 px下降，然后显示精选。我想要的是#featured被拉下20px并且在特色和标题之间仍然有一个灰色的“边框”

网站：http://e2-repair.be/

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

header {
    height: 100px;

}

header #header-cont {
    width: 1000px;
    margin: 0 auto;
    height: 100px;
    font-family: 'Sofadi One', cursive;
    }

header img {
    height: 80px;
    width: 80px;
    float:left;
    margin-top:10px;
}

header h1 {
    font-size:32px;
    float:left;
    height:100px;
    line-height:100px;
}

header nav{
    float: right;
}

header nav ul {
    list-style: none;
    display: block;
    height:100px;
}

header ul li {
    display: inline-block;
    padding: 0 50px;
}
header ul li a{
    text-decoration: none;
    color: #990000;
    display: block;
    height: 100px;
    line-height: 100px;
    border-top: 3px solid;
    border-color: #FFF;
    -webkit-transition: border-color .1s linear;
    -moz-transition: border-color .1s linear;
    -o-transition: border-color .1s linear;
    transition: border-color .1s linear;    
}

nav ul li a:hover {
    border-color: #990000;
}

header a:hover, header a:visited, header a:active {
    color: #333;
    text-decoration: none;
    outline: 0;
}

#content-1 {
    height: 400px;
    background-color: grey;
}

#featured {
    position:relative;
    height: 350px;
    width: 1000px;
    margin: 0 auto;
    border:2px solid;
    border-radius:5px;
    border-color:white;
}

HTML：

    <header>
        <div id="header-cont">
            <img src="logo.png" alt="Logo" />
            <h1>E2 Repair</h1>
            <nav>
                <ul>
                    <li><a href="smartphones.php">Smartphones</a></li>
                    <li><a href="tablets.php">Tablets</a></li>
                    <li><a href="laptops.php">Laptops</a></li>
                    <li><a href="desktops.php">Desktops</a></li>    
                </ul>
            </nav>
        </div>
    </header>

    <div id="content-1">
        <div id="featured">
        fewfwe
        </div>
    </div>

Answer 1

在padding-top容器中添加#content-1，而不是为其子容添加保证金。

或者，您可以向overflow: auto容器添加#content-1，然后应用于其子#featured的边距将起作用。

这样做的原因是由于两个元素边距在相邻时会连接在一起（折叠）。因此，应用于子元素的边距实际上与父元素连接。这个，除非边缘不要互相触碰（如果你使用填充会发生这种情况）：事实上，你也可以使用：

#content-1 { padding: 1px; }
#featured  { margin:  19px auto; }

只要他们没有碰到彼此，他们就不会崩溃，所以子元素保持自己的边缘。从规格：

如果元素没有顶部边框，没有顶部填充，并且孩子没有间隙，则流入块元素的上边距将与其第一个流入块级子元素的上边距折叠。 / p>

Source

overflow: auto具有不使边框折叠的效果（来自上一页）：

建立新的块格式化上下文的元素的边距（例如浮点数和溢出＆＃39;除了＆＃39;可见＆＃39;之外的元素）不会因其流入的子节点而崩溃。

Answer 2

您应该使用padding-top，将其应用于content-1容器。填充将应用于容器内，但边距仅应用于容器外部。我建议你在网上阅读一些文章，以便更好地理解。 http://html.net/tutorials/css/lesson10.php

需要审查，增加内容的上边距会增加标题的高度

2 个答案: