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 div =“wrapper”＆gt;也设定了上限：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但这可能是任何值。

查看小提琴here!

另一个div的div中的margin属性

2 个答案: