「CSS」display:blockでブロック要素を縦に並べる

2014年9月20日2021年10月8日

構文
display: block;
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
前後に改行が入るのでボックスは、縦に並びます。widthプロパティとheightプロパティで幅と高さを指定できます。

使用例

<style>
/*縦に並べる(block)*/
  .cft {
    display: block;
    background-color: skyblue
  }
  div {width: 200px;margin-bottom: 10px; height:30px}
</style>
<!--display:blockでブロック要素扱い-->
<div class="cft">AA block</div>
<div class="cft">BB block</div>
<div class="cft">CC block</div>
<div class="cft">DD block</div>