CSS display:blockでブロック要素を縦に並べる
環境
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でブロック要素扱いになります。