よく知られているブロックレベルフォーマットコンテキストに対して、コンテキストは、より複雑で理解するのが困難でフォーマットされます。ブロック要素とインライン要素とは異なり、他のブロック要素を順次垂直方向に下向きに配置することができ、直ブロック要素の行に行きます。インライン異なる要素は、要素が行の複数の行に表示することができ、その後、行の要素内の複数の行が配置は、以下に説明しようとする方法です。

ラインの建設

まず、私たちは物事のラインを構成しているかを理解しましょう：

<p>
    xem
    <span>
    	行内框
    </span>
    <img style="width: 40px; height: 40px; margin: 10px;" src="" />
</p>

これはトップ有し匿名文本、行内框非置換されたインライン要素の<span>行の要素を置換します、<img />

匿名テキストXEM

どの要素が直接テキスト内の親要素にさらさラップされていないことを意味します。

これらのテキストは、場所の大半を占めるでしょうか？実際には、すべての文字がテキストになりますのemボックスを（図参照：1-1）、そしてEMは、の形成に複数のEMボックスにボックスコンテンツエリア（図1-1を参照）。さて、私たちはこの匿名のテキストの上に取得しようと、もちろん、ないビンは、下記続けます。

EMボックス

EMボックスは、フォント、および高さとフォントサイズの同じ値に定義されています。

図1-1

インラインボックス

インナーフレーム（匿名テキストが形成される）が形成され、このようなラインスパン素子列内に、内枠線のコンテンツ領域は、上記匿名エリアプラステキストに応じてコンテンツを形成する工程であり、ライン間隔が形成されています。行間隔がありました。

行間隔と、彼らはどこから来るの？コンテンツ領域の高さを引いた行ピッチ線の高さ（行の高さ）。

我々は、行間隔を取得し、そしてラインは、それぞれ上部及び下部領域内枠を形成した行の内容上の2つ、で割った間隔（：1~2図を参照）。

図1-2

IMG要素

img要素は、要素が置換コンテンツ領域を形成する、置換元素であり、行が高い交換素子に適用することができない、要素が存在しない行間隔のものに置き換えられます。次に置き換える要素のコンテンツ領域の高さが計算されたあなたがたのですか？計算され、非置換要素は、さまざまな方法で自分の幅と高原宿の交換価値をさらに含むパディング、ボーダー、マージンだけでなく計算。我々は、すべての代替の非垂直方向要素マージン、パディング及び境界位置が考慮されていない知っているが、構成要素は、代替的に（図参照：1-3）の位置を占めています。