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

環境
Windows 10 Home 64bit
rustc 1.66.0

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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