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; 
}

#it​​ro にマージンを設定したいのですが、ブラウザで見ると 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 を使用しましたが、これは任意の値にすることができます。

ここでフィドルを参照してください！