「CSS」display:blockで縦に並べるサンプル

2022年7月4日

環境
Google Chrome　103.0.5060.66（Official Build）

構文
display: block;
blockでブロック要素を縦に並べます。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cft {
    display: block;
    height: 50px;
    background-color: skyblue;
  }
  span {width: 100px;margin-bottom: 20px;}
</style>
</head>
<body>
<div>
  <span class="cft">tokyo</span>
  <span class="cft">oosaka</span>
  <span class="cft">fukuoka</span>
</div>
</body>
</html>

結果
span要素は縦に並べます。

CSS

Posted by arkgame

関連記事: