spanタグはインライン要素で横並び、divタグはブロック要素で縦ならび。
displayプロパティではそれらを自在に調整できます。
‘display: block;’ されている要素は、その行を丸々使うブロック要素となり、複数を並べると縦に並ぶことになります。
‘display: inline;’ されている要素は、その要素の長さや文字数が幅となり、複数を並べると横に並ぶことになります。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>display: inline vs block</title>
<style>
body {
margin: 20px;
}
.box {
padding: 5px;
margin: 5px;
border: 1px solid black;
}
/* デフォルトのdiv要素 (display: block) */
.default-div {
background-color: #d3d3d3; /* 灰色 */
}
/* デフォルトのspan要素 (display: inline) */
.default-span {
background-color: #e0e0e0; /* 薄い灰色 */
}
/* --- display: block --- */
.block-element {
background-color: #ffcccc; /* 薄い赤 */
display: block; /* 明示的にブロック要素にする */
width: 150px; /* 幅を設定 */
height: 40px; /* 高さを設定 */
}
/* --- display: inline --- */
.inline-element {
background-color: #cceeff; /* 薄い青 */
display: inline; /* 明示的にインライン要素にする */
width: 150px; /* これらは無視されます */
height: 40px; /* これらは無視されます */
}
</style>
</head>
<body>
<h2>デフォルトの要素</h2>
<div class="box default-div">これはデフォルトでブロック要素 (div) です</div>
<h2><code>display: block</code> の例</h2>
<div class="box block-element">これはブロック要素です 1</div>
<div class="box block-element">これはブロック要素です 2</div>
<h2><code>display: inline</code> の例</h2>
<span class="box inline-element">これはインライン要素です 1</span>
<span class="box inline-element">これはインライン要素です 2</span>
</body>
</html>
プレビュー
