marginプロパティの上下に隣接するブロック要素での相殺問題

ブロック要素は親要素の横幅一杯に広がって配置される

ブロックレベル要素は、幅指定がなければ親要素の中で横幅一杯に広がって配置されますが、これは本来ブロックレベル要素の横に同一フロー内において他の要素を並べることができないからです。

<div class="boxA">
<div class="box1">1</div>
<div class="box2">2</div>
TESTEST</div>
.boxA{
    background-color:#66ccff;
    width:200px;
    height:200px;
}
  
.box1{
    background-color:#66cc99;
}
  
.box2{
    background-color:#ffcccc;
}




隣接する上下要素のマージンは相殺する

兄弟要素の上から40px、下から30pxずつマージンをとっても、相殺されて片方の40pxしかマージンは空きません。

.boxA{
    background-color:#66ccff;
    width:200px;
    height:200px;
}
  
.box1{
    background-color:#66cc99;
    margin-bottom:40px;
}
  
.box2{
    background-color:#ffcccc;
    margin-top:30px;
}

子要素がabsoluteの場合

position属性の値がabsoluteの場合、配置の基点は親要素の基点と同じく左上であり、magin-topとmargin-leftは効きますがmargin-bottomとmargin-rightは効きません。

しかも本来配置されていた領域を確保しないため、指定のボックスは必要最小限の領域しか確保せず、下の文字「YAMA3」が上にスライドします。

.boxA{
    background-color:#66ccff;
    width:200px;
    height:200px;
    position:relative;
}
  
.box1{
    background-color:#66cc99;
    margin-bottom:40px; /*効かない*/
    position:absolute;
}
  
.box2{
    background-color:#ffcccc;
    margin-top:20px;
    position:absolute;
}

親要素のpadding-topと子要素のmargin-topは両方とも有効

相殺が起こるのはmargin同士のみであり、padding同士やpaddingとmarginの間では相殺しません。この場合親要素のpadding-topと子要素のmargin-topが効いています。

.boxA{
    background-color:#66ccff;
    width:200px;
    height:200px;
    position:relative;
    padding-top:20px;
}
  
.box1{
    background-color:#66cc99;
    margin-top:20px;
    margin-bottom:40px; /*効かない*/
    position:absolute;	
}
  
.box2{
    background-color:#ffcccc;
    margin-top:30px;
    position:absolute;
}

positionがabsoluteの場合margin-rightが効かない。

positionがabsoluteの場合は基点が親要素の左上なので、margin-leftは親要素の左から離れますが、margin-rightが効きません。

.boxA{
    background-color:#66ccff;
    width:200px;
    height:200px;
    position:relative;
    padding-top:20px;
}
  
.box1{
    background-color:#66cc99;
    margin-top: 20px; 
    margin-bottom:20px; /*効かない*/
    position:absolute;	
    margin-right:20px; /*効かない*/	
}
  
.box2{
    background-color:#ffcccc;
    margin-top:20px;
    position:absolute;
    margin-left:20px; /*親要素のボーダーから20px離れる*/
}