html - 另一个 div 的 div 中的 margin 属性

Question

html:

div id="wrapper">
        <div id="itro">
          <ul>
            <li>
            <h2> Title</h2>
            <p>This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content. </p>
           </il>
           <ul>

                <div id="logo"> <img src="image/bottom_logo.png" alt="logo" width="45" height="50" align="right">
                </div>

        </div>

CSS：

#wrapper
{
    width:850px;
    margin: 0 auto;
    background: #B3B3B3;

}
#itro
{
    width:550px;
    border: 6px solid #000;
    margin: 0 auto;
    position: relative;
    background:#E7E7E7;
    margin-top:70px; 
}

我想在#itro 上设置边距，但是当我在浏览器中看到它时 div id="wrapper"> 也设置为 top margin:70px; 为什么？

Answer 1

CSS：

#wrapper{
    width:850px;
    margin: 0 auto;
    background: #B3B3B3;
    height:500px;
}
#itro
{
    width:550px;
    border: 6px solid #000;
    margin: 0 auto;
    position: relative;
    background:#E7E7E7;
    margin-top:70px; 
    float: left;
}

html:

<div id="wrapper">
        <div id="itro">
          <ul>
            <li>
            <h2> Title</h2>
            <p>This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content.This is dumy content. </p>
           </li>
           </ul>
            <div> <img src="image/bottom_logo.png" alt="logo" width="45" height="50" align="right" /></div>

      </div>

        </div>

一些标签的输入错误

Answer 2

将您的位置设置为包装器的绝对位置并添加height. 在我的情况下，我使用了 auto 但这可能是任何值。

看这里的小提琴！