はじめに
- divとspanの使い分けがあやふやだったのでまとめました。
ブロックボックスとインラインボックスについて
-
<div>: ブロックボックス -
<span>: インラインボックス - MDN ドキュメントブロック要素
- MDN インライン要素
それぞれの違いは？
- 改行されるかどうか
- ブロックボックスは改行される
- インラインボックスは改行されない
- width、heightプロパティの挙動
- ブロックボックスは適用される
- インラインボックスは適用されない
- padding、margin、borderの挙動
- ブロックボックスは適用される
- インラインボックスはpadding、margin、borderがきたとき他の要素は無視される
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body style="margin: 0">
<div>私はブロックです</div><div>私はブロックです</div><div>私はブロックです</div>
<hr />
<span>私はインラインです</span><span>私はインラインです</span><span>私はインラインです</span>
</body>
</html>
 |
|---|
display: 無理やりインラインボックスとブロックボックスを変更する
-
displayを使うことでインラインボックスとブロックボックスを変更する事ができる
ブロックボックスをインラインボックスへ変更する
css
div {
display: inline;
}
インラインボックスをブロックボックスへ変更する
css
span {
display: block;
}
inline-block: インラインボックスとブロックボックス両方の性質を持つ
-
display: inline-block;を使うことで両方の性質をもたせることができる
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body style="margin: 0">
<div>ブロック内の<span>インライン</span>です。インラインの場合は、margin,padding,borderがきたときに他の要素のことを考えません。</div>
</body>
</html>
css
span{
background-color: yellow;
margin: 20px;
border: 1px solid black;
padding: 20px;
display: inline-block;
}
- 下の画像のようにインラインで表示されているが、padding、margin、borderが効いているのがわかる。
 |
|---|