<div id="d1">
  <p>ブロック要素1</p>
  <div id="d2">
  <ul id="mar1">
    <p>ブロック要素1-1</p>
    <p>上下左右の余白をまとめて設定</p>
  </div>
  <div id="d3">
    <p>ブロック要素1-2</p>
    <p>上下左右の余白を個別に設定</p>
  </div>
</div>
#d1{
  background-color:lime;
  border:solid 1px black;
}

#d2{
  background-color:silver;
  margin:20px;
  border:solid 1px black;
}
#d3{
  background-color:silver;
  margin:50px 70px 10px 5px; 
  border:solid 1px black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.