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

2023年2月28日

環境
Windows 10 Home 64bit
rustc 1.66.0

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

使用例

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

実行結果
spanタグ「cft」はインライン要素のタグですがdisplay:blockでブロック要素扱いになります。

CSS

Posted by arkgame