通常フローでのブロック及びインラインレイアウト

この記事は翻訳作業中です。

このガイドでは、通常フローの中でブロック及びインライン要素がどのように動作するかの基本を見てみます。

通常フローは CSS 2.1 仕様書で定義されており、通常フロー内のあらゆるボックスが整形コンテキストの一部になることを説明しています。ブロックかインラインのどちらかになることができますが、同時に両方になることはできません。ブロック整形コンテキストに参加するものをブロックレベルボックス、インライン整形コンテキストに参加するものをインラインレベルボックスと呼んでいます。

ブロックまたはインライン整形コンテキストを持つ要素の動作は、この仕様書でも定義されています。ブロック整形コンテキストを持つ要素については、仕様書では以下にように言っています。

“ブロック整形コンテキストでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。二つの兄弟ボックスの間の垂直距離は、 'margin' プロパティで指定されます。ブロック整形コンテキストにおいて、隣り合うブロックレベルボックスの間の垂直マージンは相殺されます。

ブロック整形コンテキストの中では、それぞれのボックスの左外側の端は、包含ブロックの左端に接します (右書きの整形では、右端が接します)。” - 9.4.1

インライン整形コンテキストを持つ要素については以下の通りです。

“インライン整形コンテキストでは、ボックスは包含ブロックの上から次々と水平に、レイアウトされます。これらのボックスの間では、水平マージン、境界、パディングが尊重されます。ボックスは垂直方向には様々な方法で配置されます。下や上に配置されたり、テキストのベースラインに配置されたりします。1行を形成するボックスを含む矩形の領域は行ボックスと呼ばれます。” - 9.4.2

なお、 CSS 2.1 仕様書では、横書きで上から下へ向かう書字方向の文書を説明しています。例えば、ブロックボックス間を垂直距離によって説明しています。ブロックおよびインライン要素の動作は、縦書きの書字方向でも同様に動作するものであり、今後のフローレイアウトと書字方向のガイドで明らかにする予定です。

ブロック整形コンテキストに参加する要素

Block elements in a horizontal writing mode such as English, layout vertically, one below the other.

In a vertical writing mode then would lay out horizontally.

In this guide we will be working in English and therefore a horizontal writing mode. However everything described should work in the same way if your document is in a vertical writing mode.

As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.

If we set margins on the paragraph element to 0 then the borders will touch.

By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. If we give them a width, the will continue to lay out one below the other - even if there would be space for them to be side by side. Each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode.

マージンの相殺

The spec explains that margins between block elements collapse. This means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins.

In the example below, the paragraphs have a top margin of 20px and a bottom margin of 40px. The size of the margin between the paragraphs is 40px as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.

You can read more about margin collapsing in our article Mastering Margin Collapsing.

Note: if you are not sure whether margins are collapsing, check the Box Model values in your browser DevTools. This will give you the actual size of the margin which can help you to identify what is happening.

インライン整形コンテキストに参加する要素

Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don’t tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.

In the following example we have three inline boxes created by a paragraph with a strong element inside it.

The boxes around the words before the strong element and after the strong element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.

The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example I have made the strong element 300%, that content now defines the height of the line box on that line.

Find out more about how Block and Inline Boxes behave in our Guide to the Visual Formatting Model.

display プロパティとフローレイアウト

In addition to the rules existing in CSS2.1, new levels of CSS further describes the behaviour of block and inline boxes. The display property defines how a box, and any boxes inside it behaves. In the CSS Display Model Level 3 we can learn more about how the display property changes the behaviour of boxes and the boxes they generate.

The display type of an element defines the outer display type, this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a div, which I have given display: flex. The flex container behaves like a block element, it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of block.

The flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children.

Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of flow however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.

This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (display: flex) and Grid Layout (display: grid) is still participating in block and inline layout, due to the outer display type of those methods being block.

要素が参加する整形コンテキストの変更

Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example a strong element is used to highlight a word, and displays bold in browsers. It would not generally make sense for that strong element to be displayed as a block level element, breaking onto a new line. If you did want all strong elements to display as block elements, you could do so by setting display: block on strong. This means that you can always use the most semantic HTML element to markup your content, and then change the way it displays using CSS.

まとめ

In this guide we have looked at how elements display in normal flow, as block and inline elements. Due to the default behaviour of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,