<h4># display:block;</h4>
<div id="d1">
  <p>要素</p>
  <p>要素</p>
  <p>要素</p>
</div>
<hr>
<h4># display:inline;</h4>
<div id="d2">
  <p style=font-size:30px>要素</p>
  <p>要素　要素</p>
  <p style=font-size:10px;>要素</p>
</div>
<hr>
<h4># display:inline-block;</h4>
<div id="d3">
  <p style=font-size:30px;>要素</p>
  <p>要素</p>
  <p style=font-size:10px;>要素</p>
</div>
<hr>
<h4># display:none;</h4>
<div id="d4">
  <p>要素</p>
  <p>要素</p>
  <p>要素</p>
</div>

td{
  border:solid 1px;
}
p{
  background-color:silver;  
}
#d1 p{
  /* pタグは初期値 */
  display:block;
  /* 幅・高さを設定できる */
  width:100px;
  height:30px;
  /* 上下左右の余白(margin,padding)を設定できる */
  margin:10px;
  padding:5px;
}
#d2 p{
  /* 要素の高さは文字の長さや大きさできまる */
  display:inline;
  /* 上下左右の余白(margin,padding)を設定できる */
  margin-left:10px;
  margin-right:10px;
  padding-left:30px;
  padding-right:30px;
  /* text-alignが設定できる。(親要素に対して設定) */
  text-align:center;
  /* vertical-alignが設定できる。(親要素に対して設定) */
  vertical-align:top;
}
#d3 p{
  display:inline-block;
  /* 幅・高さを設定できる */
  width:100px;
  height:30px;
  /* 上下左右の余白(margin,padding)を設定できる */
  margin:10px;
  padding:5px;
  /* text-alignが設定できる。(親要素に対して設定) */
  text-align:center;
  /* vertical-alignが設定できる。(親要素に対して設定) */
  vertical-align:middle;
}
#d4 p{
  /* 要素を非表示にする */
  display:none;
}