HTML のインライン要素の垂直方向のパディングとマージンは本当に無効ですか_html/css

HTML のインライン要素の垂直方向のパディングとマージンは本当に無効ですか_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:21:26

オリジナル

1268 人が閲覧しました

参考: インライン要素とパディング

今日ナビゲーションバーを書いているときに問題が発生しました。インライン要素の padding-top、padding-bottom、margin-top、margin-bottom は本物ですか?無効ですか？

次に、この質問を詳しく分析します:

1. インライン要素にはボックスモデルがありますか?

答えは「はい」です。はい、インライン要素にはブロックレベル要素と同じボックスモデルがあります。

2. インライン要素のpadding-top、padding-bottom、margin-top、margin-bottomは無効ですか?

答えも「はい」です。ボックスモデルの width、height、padding-top、padding-bottom、margin-top、および margin-bottom の設定はすべて無効です。しかし...

3. インライン要素のpadding-top、padding-bottom、margin-top、margin-bottomの実践的な議論

まず2つの例を見てみましょう:

example1:

ソースコード:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>example1</title><style type="text/css">*{  margin:0px;  padding:0px;  text-decoration:none;  list-style:none;}#main{  min-width:1280px;  background-color:pink;  margin:auto;  height:800px;}nav{  height:50px;  background-color: #ffffff;}nav ul li{  height:50px;  float:left;  background-color: #ffffff;}a{  line-height:50px;  padding:30px;  margin:30px;  background-color:green;  font-size:14px;  color:rgb(231,79,77);}</style></head><body><div id="main"><header>    <nav>        <ul>            <li><a class="hnav" href="#">首页</a></li>            <li><a class="hnav" href="#">最新活动</a></li>            <li><a class="hnav" href="#">项目介绍</a></li>            <li><a class="hnav" href="#">爱心社区</a></li>            <li><a class="hnav" href="#">关于我们</a></li>        </ul>    </nav></header></div></body></html>

ログイン後にコピー

エフェクト (デモエフェクトをポップアップするリンクの作り方がわかりません。知っているマスターにアドバイスを求めてください):

レンダリングを見てください: リンクの親要素 li の高さ要素aとnav要素はどちらも50pxで背景は白ですが、aのcssスタイルの設定がpadding:30pxになっているため、ボックスによると高さが白い領域（つまり50px）を超えていることがわかります。インライン要素のモデル理論であるpadding-topとpadding-bottomは無効であるはずですが、ここでは有効でしょうか？まず別の例を見てみましょう:

例 2:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>example2</title><style type="text/css">*{  margin:0px;  padding:0px;}span{  color:black;  padding:50px;  margin:50px;  border:3px solid black;}.pone{  color:blue;}.ptwo{  color:tomato;}</style></head><body>    <p class="pone">    test 1<span>test span</span>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1     </p>    <p class="ptwo">test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</p></body></html>

ログイン後にコピー

効果:

別の奇妙な現象です。別の写真を撮っています。テスト 1 の部分の数が大幅に増加していることを除いて、他はすべて同じです。

はい、効果は上に示したとおりです。span によって設定されたマージンは、インライン要素のボックスモデルに準拠していますが、パディングの場合は無効です。これは水平方向と垂直方向の両方で有効であるように見えますが、上の例 1 と例 2 の 2 つの図を詳しく見てみましょう。例 1 では、設定した padding-top と padding-bottom が等しいので、垂直方向のパディングが実際にどうかどうかを確認します。有効な場合、コンテンツのフォントは中央に配置されるはずですが、実際にはそうではありません。境界線の存在は無視されており、垂直方向の内側のマージンは効果がなく、水平方向の外側のマージンのみが有効であることがわかります。。したがって、インライン要素の垂直方向のパディングは確かに無効です

w3c の公式ドキュメントを確認しましたが、この奇妙な現象の説明が見つかりませんでした (おそらく私の英語が下手で見つけられませんでした)。外国人の記事の回答：

パディングはインライン要素のすべての辺に適用できますが、周囲のコンテンツに影響を与えるのは左右のパディングのみです。以下の例では、50px のパディングがインライン要素のすべての辺に適用されています。ご覧のとおり、これは各側のコンテンツには影響しますが、上下のコンテンツには影響しません。 4 つの方向を設定します。パディングを使用すると、その効果はインライン要素に実際に表示されますが、垂直パディングは効果があるだけで、他の要素には影響しません。

したがって、インライン要素のpadding-top、padding-bottom、およびmargin-top、margin-bottomは実際には無効ですが、注意すべき点は、垂直方向の内側マージンの場合、インライン要素のコンテンツ範囲が増加することです。しかし、それは単なる外観であり、周囲の要素には影響を与えません。