インライン要素、ブロックレベル要素、内部および外部マージンの影響_html/css_WEB-ITnose

インライン要素とブロックレベル要素

ブロックレベル要素 (ブロック):

1. 新しい行の開始;
   高さ、行の高さ、マージン、およびパディングはすべて制御できます
   デフォルトの幅は次のとおりです。コンテナの 100%
   インライン要素と他のブロック要素をネストできます
   よく使用される
   5. ブロックレベルの 要素: div、h1~h6、dl、ul、ol

以内インライン要素 (インライン):

1. と他の要素は同じ行にあります。
   1. 幅はテキストまたは画像の幅であり、変更できません
   2. インライン要素はテキストまたは他のインライン要素のみを収容できます。
   3. 一般的に使用される
   inline
   4. 要素: a、span、img、input、label、select、strong、textarea

インライン要素の幅、高さ、内側と外側のマージンには注意が必要です注:

<input type="text"><input type="text" style="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;" value="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;"><input type="text">

表示効果:

そして:

<span>第一个</span><span style="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;">第二个</span> <span>第三个</span>

表示効果:

=> d5fd7aea971a85678ba271703566ebfd45a2772a6b6107b401db3c9b82c049c2 Connected 要素内と同様に、 を使用する理由は次のとおりです。幅、高さ、内部および外部マージンを設定できますが、45a2772a6b6107b401db3c9b82c049c2 は設定できません。

その理由は次のとおりです:

インライン要素には 2 つのタイプがあります: 置換された要素と置換されていない要素

置換された要素:

置換された要素とは、ブラウザがタグと要素に基づいて要素の特定の表示コンテンツを決定することを意味します。属性。

たとえば、ブラウザは画像情報を読み取り、a1f02c36ba31691bcfe87b2722de723b タグの src 属性の値に基づいてそれを表示しますが、a1f02c36ba31691bcfe87b2722de723b は単に画像ファイルを指します。 d5fd7aea971a85678ba271703566ebfd 入力ボックス、ラジオボタンなどを表示します。

非置換要素:

は、コンテンツがドキュメントに含まれる要素を指します。

たとえば、段落のテキスト コンテンツが要素自体の中に配置されている場合、その段落は非置換要素です。

内側と外側のマージンがインライン要素で機能するかどうかを議論するには、インライン置換要素とインライン非置換要素を別々に議論する必要があります:

マージンをインライン要素に適用できることを明確にしてください。インライン非置換 要素に外側のマージンを適用しても、行の高さには影響しません

1. インラインの非置換要素にパディングの上下のマージンを適用しても、行の高さには影響しません。左右のマージンを適用すると、マージンがディスプレイ効果に影響を与えるため、パディング左/右、マージン左/右

<style type="text/css">        #two{            background-color: red;            width:100px;               margin-right:50px;            padding-left:50px;        }    </style>    <span id="one">1111</span>    <span id="two">2222</span>    <span id="three">3333</span>

2. efect：

3. 
   が外側のマージンになるように設定できます。外側の余白は透明で、行の高さは影響を受けないため、視覚効果は表示されませんが、色が付いている場合、内側の余白は不透明なので、効果が表示されます

<style type="text/css">        #two{            background-color: red;            margin-top:50px;            padding-bottom: 50px;        }    </style>    <span id="one">1111</span>    <span id="two">上下对行高均无影响，但padding可显色</span><br />    <span id="three">除去行高区域外均不占文本流空间</span>

効果:

5. インライン置換要素の場合、その置換要素に設定された内側と外側のマージンは、置換要素のサイズ マージン、つまり行の高さに影響するため、マージンとパディングを設定できます。