CSS の margin 属性についての深い理解-CSSチュートリアル-php.cn

CSS の margin 属性についての深い理解 margin 属性は非常に単純な属性だと思っていましたが、最近プロジェクトに取り組んでいるときにいくつかの問題に遭遇し、margin 属性にはまだいくつかの "基礎知識とその「ピット」について以下にマージンを紹介します。このブログ記事は主に次のパートに分かれています: <ul class=" list-paddingleft-2"> <li>margin--基礎知識</li> <li>margin--兄弟要素間の応用(非親子関係) </li> <li>margin--親要素と要素の間子要素間の適用 (要点)</li> <li> マージン--マージン値の単位が% の場合のいくつかの状況 </li> </ul> <h2>パート1: マージン--基礎知識</h2> マージンの基礎知識を紹介します, <a href="//m.sbmmt.com/code/790.html" target="_blank">cssボックスモデル</a>（ボックスモデル）について話すことは避けられません。一般的に、CSSボックスモデルはデザインとレイアウトに使用されます。これは本質的には、マージン、ボーダー、パディング、中央のコンテンツを含むボックスです。下の図はボックスモデルです (ここでは W3C 仕様の標準ボックスモデルについてのみ説明します。IE5 および IE6 の奇妙なモードで使用される非標準ボックスモデルについては説明しません): <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-0.png" alt="" style="max-width:90%" style="max-width:90%"> 導入したいマージンは最外層にあります。マージン（マージン）は透明である必要があるため、異なるボックスの間に一定のギャップを残し、美しいレイアウトやその他の効果を実現するために使用できます。上記のボックスモデルから、マージンがすべての側面に存在することがわかります。margin-top、<a href="//m.sbmmt.com/wiki/934.html" target="_blank">margin-right</a>、<a href="//m.sbmmt.com/wiki/935.html" target="_blank">margin-bottom</a>、および margin-left を使用して、これら 4 つの方向のマージン値を設定できます。それぞれ。 (注: この部分の知識は比較的基本的なものであるため、この部分ではこれ以上は紹介しません) <h2>パート 2: マージン - 同じレベルの要素間 (非親子関係) に適用される </h2> このパートでは主に、水平マージンと垂直マージンを結合する問題を紹介します。 <h2> (1) 水平方向のマージンをマージします</h2> 2つの水平方向のボックスが出会い、それらの間の最終的な距離は、左のボックスの右マージンと右のボックスの左マージンの合計になります。 例1: コードは次のとおりです: <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 5 3 6 37 </td> <td class="code"> <code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="htmlKeyword">html</code> <code class="html plain">lang="ja"></code>🎜🎜<</code><code class="html keyword">head</code><code class="html plain">>🎜<code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>水平方向的两个盒子</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">border:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">body{</code> <code class="html spaces"> </code><code class="html plain">font-size: 0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.left{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">display: inline-block;</code> <code class="html spaces"> </code><code class="html plain">margin-right: 50px;</code> <code class="html spaces"> </code><code class="html plain">font-size: 20px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.right{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: yellow;</code> <code class="html spaces"> </code><code class="html plain">display: inline-block;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 50px;</code> <code class="html spaces"> </code><code class="html plain">font-size: 20px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="left">宽为100px,右边距为50px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="right">宽为100px,左边距为50px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody></table> 効果は以下の通りです: <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-1.png" alt=""> このとき、両者の距離はちょうど100pxです。 補足：ご覧のとおり、通常のドキュメントフローから2つのp（ブロック要素）を外すために、display:inline-block;属性を使用しましたさらに、font-sizeも設定しましたbody を 0 にすると、これで inline-block 自体の問題を解決できます (ここでの説明がよくわからない場合は、私のブログ投稿「CSS の表示属性の理解と適用」を参照してください。この記事では問題を紹介しています) inline-block)、それ以外の場合、2 つの p の例は 100px より大きくなります。もちろん、float を使用して 2 つの p を同じ行に表示することもできます。 <h2> (2) 縦の余白が結合されます</h2> 2つの縦のボックスが接するとき、縦方向の距離は、上のボックスの下の余白と下のボックスの上の余白の大きい方に等しくなります。の。 例2: <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 </td> <td class="code"> <code class="html plain"><!</code><code class="htmlKeyword">DOCTYPE</code> < code class="html plain">html></code><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>水平方向的两个盒子</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">border:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.top{</code> <code class="html plain"><</code><code class="htmlKeyword">html</code> <code class=" html plain">lang="en"></code>🎜🎜<code class="html plain"><</code><code class="htmlKeyword">head</code><code class= "html プレーン">></code>🎜🎜<code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset="UTF-8"></code>🎜🎜<code class="html space"> </code><code class="html plain"><</code><code class="html キーワード">タイトル</code><code class="html plain">>2 つの水平ボックス</</code><code class="html キーワード"> title</code><code class="html plain">></code>🎜🎜<code class="html space"> </code><code class="html plain"></code> <code class="html キーワード">スタイル</code><code class="html plain">></code>🎜🎜<code class="html スペース"> </code><code class="html plain">*{</code>🎜🎜<code class="html space"> </code><code class="html plain">margin:0;</code>🎜🎜<code class="html space"> </code><code class="html plain">padding:0;</code>🎜🎜<code class="html space"> </code><code class="html plain">border:0 ;</code>🎜🎜<code class="html space"> </code><code class="html plain">}</code>🎜🎜<code class="html space"> /code><code class="html plain">.top{</code>🎜<code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">margin-bottom: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.bottom{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 50px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="top">高为100px,下边距为100px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="bottom">高为100px,上边距为50px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></code> </td> </tr></tbody></table> 効果は以下の通りです: <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-2.png" alt=""> このとき、垂直方向の例は、100+50=150px ではなく、約 100px (実際には 100px) です。なぜなら 2 つの垂直 2 つの方向のボックスが接するとき、それらの垂直距離は、上のボックスの下マージンと下のボックスの上マージンの大きい方に等しいからです。 もう一つの興味深い例は次のとおりです。 margin-top と margin-bottom が同時に設定された要素があるが、その内容が空であると仮定します。その場合、2 つの margin 値も重複します。値は 2 つのうちの最大値になります。これは、2 つのボックスのマージン値を垂直方向に重ね合わせたものと似ています。コードは次のとおりです: 9 10 11 12<table border="0"><tbody>13<tr class="firstRow"> <td class="gutter">14151617181920212223 24252627 28 293031323334 <code class="html plain"><!</code><code class="html キーワード" >DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html キーワード">html</ code> < code class="html plain">lang="ja"></code> <code class="html plain"><</code><code class="html キーワード">head< /code> <code class="html plain">></code> <code class="html space"> </code><code class="html plain"><</code><code class=" html キーワード">メタ</code> <code class="html plain">charset="UTF-8"></code> <code class="html space"> </code><</code><code class="html key">title</code><code class="html plain">>2 つの水平ボックス</</code>< code class="html キーワード">タイトル</code><code class="html plain">> <code class="html space"> </code><code class="html plain "><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html space"> code ><code class="html plain">*{</code></code> <code class="html space"> </code><code class="html plain">margin:0;</code> <code class="html space"> </code><code class="html plain">padding:0;</code> <code class="html space"> </code><code class=" html plain">}</code> </td> <code class="html space"> </code><code class="html plain">.top{</code><td class="code"> <code class=" htmlスペース"> </code><code class="html plain">幅: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.middle{</code> <code class="html spaces"> </code><code class="html plain">margin-top: 100px;</code> <code class="html spaces"> </code><code class="html plain">margin-bottom:50px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.footer{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="top">上面的p,高100px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="middle"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="footer">下面的p，高100px</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr> </tbody></table> 最終的な効果は以下の通りです: <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-3.png" alt=""> 上のpと下のpの間の例は100+50=150pxではなく、2つのうちの最大の100pxであることがわかりました。 では、なぜW3Cはそのような基準を定め、水平方向と同じ基準を定めないのでしょうか？つまり、マージン値の重ね合わせであり、実際には意味があります。たとえば、複数の段落で構成されるページをデザインする必要があります。最初の段落とページの上部との間に距離があり、最後の段落と下部の間に距離があるように、margin-top と margin-bottom を設定する必要があります。以下は、オーバーレイとオーバーレイなしのレンダリングです: <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-4.png" alt=""> 左側のページは重なっていないことがわかります。そのため、2 つの段落間の例では上部の間隔が 2 倍になっているのに対し、右側のページは重なっています。そうすると、すべての間隔が等しくなります。もしかしたら、これがこのような基準を設定する目的なのかもしれません、誰にもわかりません。 <h2>パート 3: マージン -- 親要素と子要素間の適用 (重要ポイント)</h2> 2 番目のパートでは、兄弟要素間のマージンの使用を紹介します。このパートでは、最も興味深い親のアプリケーションを紹介します。要素とサブ要素間のマージン。このパートでは、これについて 2 つの側面から説明します。一方では、子要素は水平方向のマージン値を設定し、他方では、子要素は垂直方向のマージン値を設定します。 <h3> (1) 子要素に水平方向のマージン値を設定します </h3> margin-left を設定して、子要素の左ボーダーと親要素の左ボーダーの関係を制御できます。 例3: <table border="0"><tbody><tr class="firstRow"><td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 2 4 25 26 <code class="html plain"><!</code><code class="htmlKeyword">DOCTYPE</code> <code class=" html プレーン">html></code><code class="html plain"><</code><code class="html キーワード">html</code> <code class="html plain"> lang="ja"></code> <code class="html plain"><</code><code class="htmlKeyword">head</code><code class="html plain" >></code> <code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code > <code class="html plain">charset="UTF- 8"></code><code class="html space"> </code><code class="html plain"><< /code><code class="html キーワード">タイトル</ code><code class="html plain">>余白</</code><code class="html キーワード">タイトル</code>< code class="html plain">></code> <code class="html space"> </code><code class="html plain"><</code><code class="htmlキーワード">スタイル</code><code class="html plain ">></code> <code class="html space"> </code><code class="html plain">*{padding :0; マージン:0; ボーダー:0;}</code> <code class="html space"> </code><code class="html plain">.father{</code> <code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-left为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td></tr></tbody></table> 子要素の margin-left を 100px に設定しました; 効果は次のとおりです: <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-5.png" alt="" style="max-width:90%" style="max-width:90%"> つまり、子要素の左境界線と親要素の左境界線の間の距離は 100px です。 同じレベルの要素間のマージンはパディングを考慮しないため、同じレベルの要素間のマージンの設定とは異なりますが、親要素と子要素の間では異なります。親要素にパディングがあるのはどうですか？ 次の例を見てください: 例4: ここで、上記の例に基づいて親要素にパディング値を追加します。 <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </td> <td class="code"> <!</code><code class="html キーワード">DOCTYPE</code> <code class="html plain">html><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">padding:100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class=" html プレーン"><</code><code class="html キーワード">html</code> <code class="html plain">lang="ja"></code>🎜🎜<code class="html プレーン"><</code><code class="html キーワード">ヘッド</code><code class="html プレーン">></code>🎜🎜<code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset="UTF-8" ></code>🎜🎜<code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">タイトル</code> <code class="html plain">>余白</</code><code class="html キーワード">タイトル</code><code class="html plain">></code>🎜🎜 <code class="html plain"><</code><code class="html キーワード">スタイル</code><code class="html plain"> > 🎜<code class="html space"> </code><code class="html plain">.father{</code>🎜🎜<code class="html space"> </code><code class=" html plain">width: 500px;</code>🎜🎜<code class="html space"> </code><code class="html plain">height: 500px;</code>🎜🎜<code class="html スペース"> </code><code class="html plain">padding:100px;</code>🎜🎜<code class="html space"> 背景: red;</code>🎜🎜<code class="html スペース"> </code><code class="html plain">}</code>🎜🎜<code class="html space"> </code> code><code class="html plain">.son{</code>🎜🎜<code class="html space"> </code><code class="html plain">幅: 100px;</code> 🎜<code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-left为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></code> </td> </tr></tbody></table> 上記のコードは、親要素に 100px のパディング値を追加します。効果は次のとおりです。 <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-6.png" alt="" style="max-width:90%" style="max-width:90%"> 子要素はコンテンツ部分にある必要があるため、子要素の上の距離が 100px であることがわかります。これは間違いなく親要素です。 しかし、測定後、子要素の左境界線と親要素の左境界線の間の距離は 200px であることがわかります。これは、前の例では左パディング値も 100px であるためです。パディング値を設定していないので、観察しませんでした。これは、margin-left が子要素に設定されていることを示しており、その値は実際には子要素の左境界線と親要素の左パディングの内側。 例 5: margin-right の使用は margin-left の使用と似ています。ここでは例のみを示します。 この例では、子要素の margin-right の値を次のように設定します。 7 8 9 <table border="0">10<tbody><tr class="firstRow">11<td class="gutter"> 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <code class="html plain"><!</code><code class="htmlKeyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html キーワード">html</code> <code class= "html plain">lang="ja"></code> <code class="html plain"><</code><code class="html キーワード">head</code><code class =" html プレーン">></code> <code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset="UTF-8"> </code> <code class="html space"> </code><code class="html plain "> <</code><code class="html キーワード">タイトル</code><code class="html plain">>余白</</code><code class="html キーワード">タイトル </ code><code class="html plain">></code> <code class="html space"> </code><code class="html plain"><</code>< コードクラス="html キーワード">スタイル</code><code class="html plain">></code> <code class="html space"> </code><code class="html plain "> *{padding:0; margin:0;}</code> <code class="html space"> code> <code class="html space"> </code><code class="html plain">幅: 500px;</code></code> </td> <td class="code"> <code class="html space"> </code>高さ: 500px; <code class="html space"> </code><code class="html plain">padding:100px;</code> <code class="html space"> </code><code class="html plain ">背景: 赤;</code><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">padding:100px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html space"> </code><code class="html plain">}</code>🎜<code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">float: right;</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-right: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-right为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr></tbody> </table> この例と例4の違いは子要素の位置のみです。効果は次のとおりです: <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-7.png" alt="" style="max-width:90%" style="max-width:90%"> この例では、margin-right の値が子要素の右境界線と親要素 の右パディングの内側の間の距離であることを示しています。前の例ではパディングを使用しなかったため、それを観察できなかっただけです。 (2) 子要素に垂直マージンの値を設定する<h3></h3> これまでの経験によれば、理論的には、margin-topの値を設定して子要素の上端を作ることも可能です親要素の上部パディングの内側から一定の距離 を残します。それでは試してみましょう! 例6: 6 7 8 9 <table border="0">10<tbody><tr class="firstRow">11<td class="gutter"> 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <code class="html plain"><!</code><code class="html キーワード" >DOCTYPE</code> <code class="html plain">html></code>< code class="html plain"><</code><code class="html key">html</ code> <code class="html plain">lang="ja"></code> <code class="html plain"><</code><code class="html キーワード">head< /code><code class="html plain">></code> <code class="html space"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset=" UTF-8"></code> <code class="html space"> </code><</code><code class="htmlKeyword">タイトル </code><code class="html plain">>margin</</code><code class= "html キーワード">タイトル</code><code class="html plain">> <code class="html space"> </code><code class="html plain">&lt ;</code><code class="html キーワード">スタイル</code><code class="html plain">></code> <code class="html スペース"> </code>*{padding:0; border:0;} <code class="html space"> </code><code class="html plain">.father{</code> <code class="html space"> </code>幅: 500px;</td> <td class="code"> <code class="html space"> </code><code class="html plain">高さ: 500px;</code> <code class="html space"> </code><code class="html plain">背景: 赤; </code> <code class="html spaces"> </code> <code class="html plain">} </code><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 500px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="htmlスペース">><code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 100px;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">高度为100px，margin-top为100px。</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></code> </td> </tr></tbody> </table> この例では、margin-top を 100px に設定し、その効果は次のようになります。 <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-8.png" alt="" style="max-width:90%" style="max-width:90%"> これは私たちが望む効果ではありません。子要素の上部が 100px 離れていることを望みます。親要素の上部が表示されますが、親要素の上部がブラウザページの上部から 100 ピクセル離れています。これはなぜでしょうか。何が悪かったのか？ 実はこれは、親要素にpadding値とborder値を設定していない場合、親要素の上部と子要素の上部が完全に重なって分離できないというバグが発生するためです。そのため、上記の親要素と子要素が同時に下に移動します。 この問題にはいくつかの解決策があります: <ul class=" list-paddingleft-2"> <li>方法 1: <a href="//m.sbmmt.com/wiki/949.html" target="_blank">padding-top</a> 値を追加する</li> <li>方法 2: ボーダー値を親要素に追加する </li> <li> メソッド3: 属性 overflow:hidden; </li> <li>を追加する方法 4: 親要素または子要素に float を宣言する</li> <li> 方法 5: 親要素または子要素を<a href="//m.sbmmt.com/code/6074.html" target="_blank">絶対位置として宣言する</a>: Position:absolute;</li> <li>メソッド 6: 親要素に属性を追加します overflow:auto; positon:relative; (注: このメソッドは、ブロガー @SmallelvesPawn に提供していただいたので、後で追加します)</li> </ul> 方法 1: 例 6 に基づいて、親要素の CSS コードに padding-top:1px を追加します。効果は次のとおりです。 <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-9.png" alt="" style="max-width:90%" style="max-width:90%"> この方法の唯一の欠点は次のとおりです。 1pxの誤差が増えるということです。 方法 2: 例 6 に基づいて、親要素の CSS コードに border-top:1px ソリッド透明を追加します。効果は次のとおりです。同じ効果が得られますが、欠点は方法 1 と同じです。 <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-10.png" alt="" style="max-width:90%" style="max-width:90%"> 方法 3: 例 6 に基づいて、親要素の CSS コードに overflow: hidden を追加します。効果は次のとおりです。同じ効果が得られ、エラーは存在しません。完璧です!!!! 方法 4: 例 6 に基づいて float を親要素または子要素に宣言し、子要素の CSS コードに float:left を追加するか、親要素の CSS コードに float を追加します。 css コード: left; 効果が得られ、同じ画像はここには表示されなくなりました。 利点: ピクセルエラーがありません。欠点: float が不要な場合があります。 <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-11.png" alt="" style="max-width:90%" style="max-width:90%"> 方法 5:position:absolute; 属性を親要素または子要素に追加します。同様の効果が得られます。 利点: 方法 4 と同じ。また、上と左を使わない限り影響はないので、これも良い方法です。 (説明: ブログ友達の @laden666666 は、上記のメソッド 3、4、5 は、実際には親コンテナを貫通しないように子要素のマージンを削除するメソッドであると指摘しました。これらは BFC メソッドとして分類でき、本質的には同じです。感謝の意を表します) 方法 6: 同じ効果を達成するには、overflow:auto とposition:relative; を追加します。 この方法は個人的にテストされており、効果的です。感謝の意を表します。 その4: margin 値の単位が % の場合のいくつかの状況以前に例を示したときに margin を使用しましたが、その値はすべて px 単位なので、理解するのに問題はありません。 しかし、マージン値が % の場合はどうなるでしょうか?実はこのときのパーセンテージ(%)はその要素の親要素(コンテナ)に対する相対的なものであり、兄弟要素でも親子要素でも同様です。 (ブロガー @小エルフPawn からの提案に改めて感謝します!! この提案に基づいて、コンテンツのこの部分を補足します) ただし、同じレベルの要素に垂直マージンを使用すると、予期しない結果が発生します。以下に例を示します。 (1)同じレベルの要素は横方向に%のマージンを使用します。 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <td class="code"> <code class="html plain"><</code><コードクラス= "html キーワード">head</code><code class="html plain">></code><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.first{</code> <code class="html spaces"> </code><code class="html plain">float: left;</code> <code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.second{</code> <code class="html spaces"> </code><code class="html plain">float: left;</code> <code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 20%;</code> <code class="html space"> </code> <code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> > <code class="html space"> </code><code class="html plain"><</code><code class="html キーワード">タイトル</code><code class="html plain">>余白</</code><code class="html キーワード">タイトル</code><code class="html plain">> code>🎜🎜<code class="html space"> </code><code class="html plain"><</code><code class="htmlKeyword">style</code><code class= "html plain">></code>🎜🎜<code class="html space"> </code><code class="html plain">*{</code>🎜🎜<code class="html space "> </code><code class="html plain">margin:0;</code>🎜🎜<code class="html space"> </code><code class="html plain">padding:0 ;</code>🎜🎜<code class="html space"> </code><code class="html plain">}</code>🎜🎜<code class="html space"> </code>.first{</code>🎜🎜<code class="html space"> </code><code class="html plain">float: left;</code>🎜🎜 <code class="html plain">width: 200px;</code>🎜🎜<code class="html space"> </code><code class="html plain">高さ: 200px;</code>🎜🎜<code class="html space"> </code><code class="html plain">背景: 緑;</code>🎜🎜<code class=" html スペース"> </code><code class="html plain">}</code>🎜🎜<code class="html space"> </code><code class="html plain">.second{🎜🎜<code class="html space"> </code><code class="html plain">float: left;</code>🎜🎜<code class="html space"> </code> <code class="html plain">幅: 200px;</code>🎜🎜<code class="html space"> </code><code class="html plain">高さ: 200px;</code>🎜 🎜<code class="html space"> </code><code class="html plain">背景: 赤;</code>🎜🎜<code class="html space"> </code><code class="html plain">マージン左: 20%;</code>🎜<code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="first">宽为200，无margin</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="second">宽为200,margin-left为20%;</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></code> </td> この例では、2 つの要素の水平方向のマージンが簡単に確認できるように、2 つの要素が左側にフロートするように設定されています。このうち、左の p にはマージンがなく、右の p のマージン左は 20% です。 <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-12.gif" alt="" style="max-width:90%" style="max-width:90%"> レンダリングから、2 つの p 間の距離が次のようになります。常に親要素です (ここでは、右側の p の親要素は本文であり、その幅はブラウザの幅の 20% です)。 <h3>この場合、2 つの間の最終的な距離は、親要素 (上の例では body) のパーセンテージになります。では、これは本当にそうなのでしょうか？以下の例を参照してください。 </h3> 例8 <table border="0"><tbody>1<tr class="firstRow"> <td class="gutter">234567 891011 121314151617181920212223 242526 </td> <td class="code"> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset= "UTF-8"></code><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.first{</code> <code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.second{</code><code class="html space"> </code><code class="html plain"><</code><code class="html キーワード">タイトル</code><code class="html plain">>余白</</code><code class="html キーワード">タイトル</code><code class="html plain">> code></code>🎜<code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">スタイル</code><code class= "html plain">></code>🎜🎜<code class="html space"> </code><code class="html plain">*{</code>🎜🎜<code class="html space "> ;</code>。 🎜🎜<code class="html space"> </code><code class="html plain">}</code>🎜🎜<code class="html space"> code>.first{</code>🎜🎜<code class="html space"> </code><code class="html plain">width: 200px;</code> 🎜🎜 <code class="html plain">高さ: 200px;</code>🎜🎜<code class="html space"> </code><code class="html plain">背景: 緑;</code>🎜🎜<code class="html space"> </code><code class="html plain">}</code>🎜🎜<code class=" html スペース"> </code><code class="html plain">.秒{</code>🎜<code class="html spaces"> </code><code class="html plain">width: 200px;</code> <code class="html spaces"> </code><code class="html plain">height: 200px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 10%;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="first">高为200，无margin</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="second">高为200,margin-top为20%;</</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr> </tbody></table> ここでは、上の p にはマージンがなく、下の p のマージントップは 10 です。効果は次のとおりです。 <img src="https://img.php.cn/upload/article/000/000/007/73737215d222f61d1e7c7f1447c45d1b-13.gif" alt="" style="max-width:90%" style="max-width:90%"> ブラウザの高さを減らしても、垂直方向の間隔は縮まらないことがわかりました。！！そしてブラウザの横幅を小さくすると縦方向の距離が縮まります！！！ これは、マージンが統計要素間の垂直方向に使用されることを意味します。値の単位が % の場合、親要素の幅を基準とします。 では、ブラウザに対する相対的な高さが希望通りにならないのはなぜでしょうか? Zhihu のマスターはこのように説明しました (元のアドレス: https://www.zhihu.com/question/20983035?rf=27109182): <img src="https://img.php.cn/upload/article/000/000/007/ba8858fe462ad9a8fb9cdcbc308e9ef1-14.png" alt="" style="max-width:90%" style="max-width:90%"> <h3></h3> <h3></h3> <h3> (3) 父親と子要素は、%</h3> の値を持つマージンを使用します。親要素を基準とした高さ)! 例9 コードは次のとおりです。 4 5 6 7<table border="0"><tbody> 8<tr class="firstRow"> <td class="gutter">91011121314151617181920 21222324 25262728293031 <code class="html plain"><!</code><code class="html キーワード">DOCTYPE </code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html キーワード">html< /code> <code class="html plain">lang="ja"></code> <code class="html plain"><</code><code class="html キーワード">head </code ><code class="html plain">></code> <code class="html space"> </code><code class="html plain"><</code>< code class= "html キーワード">メタ</code> <code class="html plain">charset="UTF-8"></code> <code class="html space"> </code> <code class="html plain"><</code><code class="htmlKeyword">タイトル</code><code class="html plain">>ドキュメント</</code><code class ="html キーワード">タイトル</code><code class="html plain">></code> <code class="html space"> </code><code class="html plain"> << /code><code class="html キーワード">スタイル</code><code class="html plain">></code> </td> <code class="html space"> </code> <code class="html plain">*{</code><td class="code"> <code class="html space"> </code><code class="html plain">margin:0;</code> <code class="html plain">padding:0;</code><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code> <code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code> <code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>Document</</code><code class="html keyword">title</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain">*{</code> <code class="html spaces"> </code><code class="html plain">margin:0;</code> <code class="html spaces"> </code><code class="html plain">padding:0;</code> <code class="html spaces"> </code><code class="html plain">}</code><code class="html space"> }</code> <code class="html spaces"> </code><code class="html plain">.father{</code> <code class="html spaces"> </code><code class="html plain">width: 500px;</code> <code class="html spaces"> </code><code class="html plain">height: 300px;</code> <code class="html spaces"> </code><code class="html plain">background: red;</code> <code class="html spaces"> </code><code class="html plain">overflow: hidden;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain">.son{</code> <code class="html spaces"> </code><code class="html plain">width: 100px;</code> <code class="html spaces"> </code><code class="html plain">height: 100px;</code> <code class="html spaces"> </code><code class="html plain">background: green;</code> <code class="html spaces"> </code><code class="html plain">margin-top: 20%;</code> <code class="html spaces"> </code><code class="html plain">margin-left: 20%;</code> <code class="html spaces"> </code><code class="html plain">}</code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code> <code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code> <code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code> </td> </tr> </tbody></table> この例では、左マージンの値を 20%、マージンの上の値を 20%、親要素の幅を 500px、親要素の高さをに設定します。 300ピクセル。 以下で効果を見てみましょう。 <img src="https://img.php.cn/upload/article/000/000/007/856d2f11c3d8af9a226d1a5f5414cef7-15.png" alt="" style="max-width:90%" style="max-width:90%"> 上の図からわかるように、子要素のマージントップの値は、最終的には高さではなく、親要素の幅に相対します。

以上がCSS の margin 属性についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。