ホームページ > 記事 > ウェブフロントエンド > インライン要素のpadding-top属性

インライン要素のpadding-top属性

巴扎黑オリジナル: 2017-06-28 14:30:182100ブラウズ

この質問の理由は、少し前の面接中に、面接官がインライン要素でのマージンとパディングの使用の効果について質問したのですが、あまり答えられなかったようです。たまたま過去 2 日間にこの問題を調べるためにいくつかのデモを作成する時間がありましたが、いくつかの落とし穴を発見しました。

まずデモに行きます:

スタイルシート

<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	.inline{
		border: 1px solid red;
		padding: 20px;
	}
</style>

htmlコード1:

<body>
    <span class="inline">span</span>
    <span class="inline">span</span>
    <span class="inline">span</span>
</body>

htmlコード2

<body>
	<input type="text" class="inline" value="input" />
	<input type="text" class="inline" value="input" />
        <input type="text" class="inline" value="input" />
</body>

同じスタイルシートを使用して上記の2つのコードを実行してください。問題が見つかりました:span の padding-top が設定されているのに、ブラウザに表示されません。span と input の両方が inline 要素であるのはなぜですか?

2. w3c ドキュメントを取得します http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties

'padding-top'、

padding-right

'、

padding-bottom

'、

'padding-left'Value:

53069f17a82fe89656b0a07e4fc5692b |継承

0適用対象:含まれるブロックの幅を参照ビジュアル指定されたパーセンテージまたは絶対的な長さ

これらのプロパティは、非置換インライン要素には影響しません。

那么これは何かですか？

先書き: 10.6.1 インラインの非置換要素

'height'

プロパティは適用されません。コンテンツ領域の高さはフォントに基づく必要がありますが、この仕様ではその方法は指定されていません。 UA は、たとえば、em-box やフォントの最大のアセンダとディセンダを使用する場合があります。 (後者では、em ボックスの上または下の部分を持つグリフがコンテンツ領域内に確実に収まりますが、フォントごとに異なるサイズのボックスが生成されます。前者では、作成者が「行の高さ」に関連して背景のスタイルを制御できることが保証されます。ただし、グリフがコンテンツ領域の外にペイントされることになります。)

注: CSS のレベル 3 には、コンテンツの高さに使用されるフォントの尺度を選択するプロパティが含まれる可能性があります。

インラインの非置換ボックスはコンテンツ領域の上部と下部から始まり、'line-height'

とは関係がありません。ただし、行ボックス

の高さを計算するときに使用されるのは、

「line-height」

だけです。複数のフォントが使用されている場合（これは、グリフが異なるフォントで見つかった場合に発生する可能性があります）、コンテンツ領域の高さこの仕様では定義されていません。ただし、コンテンツ領域が、(1) em ボックス、または (2) 要素内のすべてのフォントの最大アセンダーとディセンダーのいずれかにちょうど十分な高さになるように高さを選択することをお勧めします。フォントのベースライン配置に応じて、これは関連するどのフォントサイズよりも大きくなる可能性があることに注意してください。 10.3.2 インライン、置換された要素

「margin-left」の「auto」の計算値 または

'margin-right'

は、使用されている値「0」になります。

'height'

と 'width' の両方が 'auto' の計算値を持ち、要素に固有の幅がある場合の場合、

intrinsic

幅は'width'の使用値です。'height'と'width'の両方に'auto'の計算値があり、要素にintrinsic幅がない場合、ただし、

本質的な

高さと本質的な比率があります。または、'width' に 'auto' の計算値があり、'height' に他の計算値があり、要素に固有の比率がある場合。 'width'の使用値は次のとおりです:(使用された高さ) * (固有比率)「height」と'width'の両方が「auto」の計算値を持ち、要素に固有の比率はあるが、固有の高さや幅がない場合、使用される「幅」の値は CSS 2.1 では定義されていません。ただし、含まれるブロックの幅自体が置換された要素の幅に依存しない場合、使用される「幅」の値は、通常のフローでブロックレベルの非置換要素に使用される制約式から計算されることが示唆されています。

それ以外の場合、
'width'
の計算値が「auto」で、要素に固有の幅がある場合、その固有の幅は

'width'

の使用値になります。それ以外の場合、

'width 「

の計算値は「auto」ですが、上記の条件がいずれも満たされない場合、「width」の使用値は 300px になります。 300 ピクセルがデバイスに適合するには広すぎる場合、UA は、代わりに 2:1 の比率を持ち、デバイスに適合する最大の長方形の幅を使用する必要があります。、または非常に高い。

概要:

input、margin、paddingなどの置換要素が全方向に動作する場合、

span、aなどの置き換え不可能な要素の場合、

padding-left、padding-right両方とも効果がありますが、padding-top は効果がありません。

コメントで @meta-D が指摘したように、padding-bottom は無効であり、境界線のスタイルにのみ影響することが後に検証されました。写真についてはコメントをご覧ください。

margin-rightとmargin-leftは効果がありますが、margin-topとmargin-bottomは効果がありません。

アップデート 4.16:

最近、CSS の権威あるガイドを読んでいたとき、その本にはこう書かれていました: 非置換要素のパディング、ボーダー、マージンは、インライン要素とその生成されたボックスに垂直方向の影響を与えません。、インラインボックスの高さには影響しません。（まだまだ本を読まないといけません）

いつも記事が中途半端な気がするので、とりあえず下のリンクを見ていただいて、さらに深掘りしていきます。

関連リンク (高い壁を超えるには階段が必要):

http://maxdesign.com.au/news/inline/

http://stackoverflow.com/questions/12468176/what-is- a- non-replaced-inline-element

http://melon.github.io/blog/2015/03/07/inline-replaced-vs-inline-nonreplaced/

http://reference.sitepoint.com /css /replaceelements

初期値:
table-caption、table、inline-table 以外の表表示タイプを持つ要素を除くすべての要素
継承: no	パーセンテージ:
	メディア:
	計算値:

以上がインライン要素のpadding-top属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：android:padding と android:margin の違い次の記事：android:padding と android:margin の違い

続きを見る