CSSのマージンとは何ですか？

私はmarginが長い時間前から親要素とそれ自身の間のスペースであると仮定しました。しかし、私はそれが真実ではないと思う。下のHTMLをCSSで確認してください。CSSのマージンとは何ですか？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Box Model</title> 
<style type="text/css"> 
    body { 
    background-color: #ccc; 
    } 
    header { 
     text-align: center; 
     text-decoration: underline; 
     font-weight: bold; 
    } 
    #container { 
     background-color: grey; 
     width : 400px; 
     height : 400px; 
    } 
    #container .box { 
     background-color: slategrey; 
     width : 200px; 
     height : 200px; 
     color : #fff; 
     border: 5px solid navy; 
     margin-top: 50px; 
     margin-left:50px; 
     padding-top:20px; 
     padding-left:20px; 
    } 
</style> 
</head> 
<body> 
    <header>Box Model Example</header> 
    <section> 
     <div id="container"> 
      <div class="box">Content</div> 
     </div> 
    </section> 
</body> 
</html>

次のような出力が表示されます。マイmargin-top:50px;

は親elment コンテナと要素ボックスの間のスペースではありません。これらの2つの要素の間に（上から）スペースを追加するにはどうすればよいですか？あなたの#containerに

出典

2016-04-12 Cataclysm

あなたは余裕があるかについて間違っていませんよ。あなたの実際の質問は "なぜmargin-topがここで動作しないのですか？"

私が間違っていない場合、これはcollapsing marginsの場合です。特定の状況では、2つの要素の垂直方向のマージンが組み合わされます。（はあなたの例ではの上マージンであることに注意してください）。

そこに記載されている解決方法の1つを試みることができます代わりに外側のボックス。

出典

2016-04-12 11:26:59 vvye

ありがとうございます！私の実際の質問は、「マージントップはなぜここでは機能しないのですか」と述べました。あなたの提案されたリンクは私の問題の解決策であり、私の質問はそれと重複しているようです。 – Cataclysm

-3

追加パディングトップ：

#container { padding-top: 50px;}

出典

2016-04-12 11:24:45 Vishit

あなたはあなたの答えを説明することができます。しかし、これは問題を解決しません –

あなたはコンテナとコンテナボックスの間のマージンをしたいですか？ – Vishit

-2

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Box Model</title> 
 
<style type="text/css"> 
 
\t #container:before, #container:after{content:''; display:table;} 
 
\t #container:after{clear:both} 
 
\t #container{zoom:1;} 
 
    body { 
 
    background-color: #ccc; 
 
    } 
 
    header { 
 
     text-align: center; 
 
     text-decoration: underline; 
 
     font-weight: bold; 
 
    } 
 
    #container { 
 
     background-color: grey; 
 
     width : 400px; 
 
     height : 400px; 
 
    } 
 
    #container .box { 
 
     background-color: slategrey; 
 
     width : 200px; 
 
     height : 200px; 
 
     color : #fff; 
 
     border: 5px solid navy; 
 
     margin-top: 50px; 
 
     margin-left:50px; 
 
     padding-top:20px; 
 
     padding-left:20px; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <header>Box Model Example</header> 
 
    <section> 
 
     <div id="container"> 
 
      <div class="box">Content</div> 
 
     </div> 
 
    </section> 
 
</body> 
 
</html>

出典

2016-04-12 11:34:45

あなたのコードが正しいです。

#container & #container .boxクラスにこれらの行を追加する必要があります。

display:inline-block; 
position:relative;

は、ディスプレイの詳細については、&位置にある：http://www.w3schools.com

あなたの最終的なコード：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Box Model</title> 
<style type="text/css"> 
    body { 
    background-color: #ccc; 
    } 
    header { 
     text-align: center; 
     text-decoration: underline; 
     font-weight: bold; 
    } 
    #container { 
     background-color: grey; 
     width : 400px; 
     height : 400px; 
     display:inline-block; 
     position:relative; 
    } 
    #container .box { 
     background-color: slategrey; 
     width : 200px; 
     height : 200px; 
     display:inline-block; 
     position:relative; 
     color : #fff; 
     border: 5px solid navy; 
     margin-top:50px; 
     margin-left:50px; 
     padding-top:20px; 
     padding-left:20px; 
    } 
</style> 
</head> 
<body> 
    <header>Box Model Example</header> 
    <section> 
     <div id="container"> 
      <div class="box">Content</div> 
     </div> 
    </section> 
</body> 
</html>

出典

2016-04-12 11:41:31 aghilpro

CSSのマージンとは何ですか？

答えて

関連する問題