CSSについて説明します。
block boxとinline boxについて説明します。
block box
div
{
display: block;
}
div element(div要素)をblock levelに指定しています。
block level boxと、block container boxと、block boxは、blockと呼ばれます。
sample
サンプルで確認します。
test_002.css
div.test-002-001
{
display: block;
width: 70%;
margin: 20px;
border: 1px solid;
border-color: rgba(0, 0, 240, 1.0);
padding: 20px;
}
test_002.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_002.css"/></head>
<body>
<div class="test-002-001"><div class="test-002-001"></div></div>
</body>
表示は下記となります。
inline box
span
{
display: inline;
}
span element(span要素)をinline levelに指定しています。
inlineの途中に折り返しを含むboxを挿入できる要素。
- inline levelのimg要素やvideo要素(置換要素)
- display: inline flow-root;指定した要素
- display: inline table;指定した要素
上記ではない場合は、atomic inline-level boxと呼ばれ、inline-level boxの中での折り返しが発生しません。
display: inline-block; (CSS 2)は、display: inline flow-root; (CSS 3)となります。
sample
サンプルで確認します。
test_002.css
p.test-002-002
{
display: inline;
margin: 20px;
border: 1px solid;
padding: 5px;
}
test_002.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_002.css"/></head>
<body>
<div class="test-002-001"><p class="test-002-002">inline box</p><p class="test-002-002">inline box</p><p class="test-002-002">inline box</p><p class="test-002-002">inline box</p><p class="test-002-002">inline box</p></div>
</body>
表示は下記となります。
inline box
inline box
inline box
inline box
inline box
run-in box
run-inは、2017年くらいからIEのみが対応しているようです。
説明は省略します。
参考
9 Visual formatting model
https://www.w3.org/TR/css-display-3/
参考 & 広告
Kindle版です。
紙の本と、PDF版があります。
Kindle版です。
電子書籍です。