「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>

<!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>

<!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

関連投稿: