2016-08-06 3 views
-3

1)width margin-rightを指定すると無効です(位置が「静的」のみ)。width margin-rightを指定するのが無効なのはなぜですか?

<style type="text/css"> 
    body{ 
     border:1px solid #808080; 
     width:500px; 
     height:500px; 
    } 
    div { 
     border: 1px solid #0094ff; 
     width: 200px; 
     /*margin-left:50px;*/ /* ok */ 
     /*margin-top:50px;*/ /* ok */ 
     margin-right: 50px; /* invalid,not working ?*/ 
     margin-bottom: 50px; /* invalid,not working?*/ 
    } 

</style> 
<body> 
    <div>test div</div> 
</body> 

2)なぜdivの幅を削除すると余白が有効になるのですか?

3)体の高さを取り除くと、マージンボトムが有効になるのはなぜですか?

マージン右とマージンボトムのルールを一致させるデフォルトレイアウトのこのCSSは何ですか?

私の平均は、divの位置は「フロート」プロパティを使用していない静的」とあるです。おかげさまで

答えて

1

コードはきれいで有効です。ただし、適用しようとしている効果を確認するには、比較する要素を追加する必要があります。

margin-bottomを追加すると、divの要素が押し下げられることを意味します。同じ幅のmargin-rightdivの横の要素が右側にプッシュされます。

body { 
 
    border: 1px solid #808080; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
div { 
 
    border: 1px solid #0094ff; 
 
    width: 150px; 
 
    margin-right: 50px; 
 
    margin-bottom: 50px; 
 
    float: left; 
 
}
<div>Lorem.</div> 
 
<div>Officiis.</div> 
 
<div>Asperiores.</div> 
 
<div>Enim.</div>

:あなたは余裕が右側と下側にどのように影響するかを見ることができるように

Webページを実証するために、私は浮いているdivs 3以上を追加しました

関連する問題