ホームページ > 記事 > ウェブフロントエンド > CSS の margin 属性についての深い理解
CSS の margin 属性についての深い理解
- 巴扎黑オリジナル
- 2017-06-28 13:34:201810ブラウズ
<p>CSS の margin 属性についての深い理解</p>
<p> margin 属性は非常に単純な属性だと思っていましたが、最近プロジェクトに取り組んでいるときにいくつかの問題に遭遇し、margin 属性にはまだいくつかの "基礎知識とその「ピット」について以下にマージンを紹介します。このブログ記事は主に次のパートに分かれています: </p>
<ul class=" list-paddingleft-2">
<li><p>margin--基礎知識</p></li>
<li><p>margin--兄弟要素間の応用(非親子関係) </p></li>
<li><p>margin--親要素と要素の間子要素間の適用 (<strong>要点</strong>)</p></li>
<li>
<p>マージン--マージン値の単位が%</p>
<p>の場合のいくつかの状況</p>
</li>
</ul>
<h2>パート1: マージン--基礎知識</h2>
<p>マージンの基礎知識を紹介します, <a href="http://www.php.cn/code/790.html" target="_blank">cssボックスモデル</a>（ボックスモデル）について話すことは避けられません。一般的に、CSSボックスモデルはデザインとレイアウトに使用されます。これは本質的には、マージン、ボーダー、パディング、中央のコンテンツを含むボックスです。下の図はボックス モデルです (ここでは W3C 仕様の標準ボックス モデルについてのみ説明します。IE5 および IE6 の奇妙なモードで使用される非標準ボックス モデルについては説明しません): </p>
<p> <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-0.png" alt="" style="max-width:90%" style="max-width:90%"></p>
<p> 導入したいマージンは最外層にあります。マージン（マージン）は透明である必要があるため、異なるボックスの間に一定のギャップを残し、美しいレイアウトやその他の効果を実現するために使用できます。上記のボックス モデルから、マージンがすべての側面に存在することがわかります。margin-top、<a href="http://www.php.cn/wiki/934.html" target="_blank">margin-right</a>、<a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a>、および margin-left を使用して、これら 4 つの方向のマージン値を設定できます。それぞれ。 (注: この部分の知識は比較的基本的なものであるため、この部分ではこれ以上は紹介しません) </p>
<p> </p>
<p> </p>
<h2>パート 2: マージン - 同じレベルの要素間 (非親子関係) に適用される </h2>
<p>このパートでは主に、水平マージンと垂直マージンを結合する問題を紹介します。 </p>
<h2> (1) 水平方向のマージンをマージします</h2>
<p> <strong>2つの水平方向のボックスが出会い、それらの間の最終的な距離は、左のボックスの右マージンと右のボックスの左マージンの合計になります。 </strong></p>
<p><strong> 例1: </strong></p>
<p><strong> コードは次のとおりです: </strong></p>
<p><strong> </strong></p>
<p class="cnblogs_Highlighter sh-gutter"><br></p>
<p class="syntaxhighlighter html"><br></p>
<table border="0"><tbody><tr class="firstRow">
<td class="gutter"> <p class="line number1 index0 alt2">1 </p>
<p class="line number2 index1 alt1">2</p>
<p class="line number3 index2 alt2">3</p>
<p class="line number4 index3 alt1">4</p>
<p class="line number5 index4 alt2">5</p>
<p class="line number6 index5 alt1">6 </p>
<p class="line number7 index6 alt2">7</p>
<p class="line number8 index7 alt1">8</p>
<p class="line number9 index8 alt2">9</p>
<p class="line number10 index9 alt1">10</p>
<p class="line number11 index10 alt2">11</p>
<p class="line number12 index11 alt1">12</p>
<p class="line number13 index12 alt2">13</p>
<p class="line number14 index13 alt1">14</p>
<p class="line number15 index14 alt2">15</p>
<p class="line number16 index15 alt1">16</p>
<p class="line number17 index16 alt2">17</p>
<p class="line number18 index17 alt1">18</p> <p class="line number19 index18 alt2">19</p>
<p class="line number20 index19 alt1">20</p>
<p class="line number21 index20 alt2">21</p>
<p class="line number22 index21 alt1">22</p>
<p class="line number23 index22 alt2"> 23</p>
<p class="line number24 index23 alt1">24</p>
<p class="line number25 index24 alt2">25</p>
<p class="line number26 index25 alt1">26</p>
<p class="line number27 index26 alt2">27</p>
<p class="line number28 index27 alt1">28</p>
<p class="line number29 index28 alt2">29</p>
<p class="line number30 index29 alt1">30</p>
<p class="line number31 index30 alt2">31</p>
<p class="line number32 index31 alt1">32</p>
<p class="line number33 index32 alt2">33</p>
<p class="line number34 index33 alt1">34</p>
<p class="line number35 index34 alt2">3 5</p>
<p class="line number36 index35 alt1">3 6</p>
<p class="line number37 index36 alt2">37</p>
</td>
<td class="code">
<p class="container"><br></p> <p class="line number1 index0 alt2"><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></p>
<p class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code></p>
<p class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p>
<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">>🎜<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number5 index4 alt2"><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></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">*{</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">margin:0;</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">padding:0;</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">border:0;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">body{</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">font-size: 0;</code></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">.left{</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">display: inline-block;</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain">margin-right: 50px;</code></p>
<p class="line number21 index20 alt2"><code class="html spaces"> </code><code class="html plain">font-size: 20px;</code></p>
<p class="line number22 index21 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number23 index22 alt2"><code class="html spaces"> </code><code class="html plain">.right{</code></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<p class="line number25 index24 alt2"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number26 index25 alt1"><code class="html spaces"> </code><code class="html plain">background: yellow;</code></p>
<p class="line number27 index26 alt2"><code class="html spaces"> </code><code class="html plain">display: inline-block;</code></p>
<p class="line number28 index27 alt1"><code class="html spaces"> </code><code class="html plain">margin-left: 50px;</code></p>
<p class="line number29 index28 alt2"><code class="html spaces"> </code><code class="html plain">font-size: 20px;</code></p>
<p class="line number30 index29 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number31 index30 alt2"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number32 index31 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number33 index32 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number34 index33 alt1"><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></p>
<p class="line number35 index34 alt2"><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></p>
<p class="line number36 index35 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number37 index36 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p>
</td>
</tr></tbody></table>
<p> 効果は以下の通りです: </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-1.png" alt=""></p>
<p>このとき、両者の距離はちょうど100pxです。 </p>
<p> 補足：ご覧のとおり、通常のドキュメントフローから2つのp（ブロック要素）を外すために、display:inline-block;属性を使用しました<strong>さらに、font-sizeも設定しましたbody を 0 にすると、これで inline-block 自体の問題を解決できます (</strong>ここでの説明がよくわからない場合は、私のブログ投稿「CSS の表示属性の理解と適用」を参照してください。この記事では問題を紹介しています) inline-block<strong>)、</strong>それ以外の場合、2 つの p の例は 100px より大きくなります。もちろん、float を使用して 2 つの p を同じ行に表示することもできます。 </p>
<p> </p>
<h2> (2) 縦の余白が結合されます</h2>
<p> <strong> 2つの縦のボックスが接するとき、縦方向の距離は、上のボックスの下の余白と下のボックスの上の余白の大きい方に等しくなります。の。 </strong></p>
<p><strong> 例2: </strong></p>
<p><strong> </strong></p>
<p class="cnblogs_Highlighter sh-gutter"><br></p>
<p class="syntaxhighlighter html"><br></p>
<table border="0"><tbody><tr class="firstRow">
<td class="gutter">
<p class="line number1 index0 alt2">1</p>
<p class="line number2 index1 alt1">2</p>
<p class="line number3 index2 alt2">3</p>
<p class="line number4 index3 alt1">4 </p>
<p class="line number5 index4 alt2">5</p>
<p class="line number6 index5 alt1">6</p>
<p class="line number7 index6 alt2">7</p>
<p class="line number8 index7 alt1">8</p>
<p class="line number9 index8 alt2">9</p> <p class="line number10 index9 alt1">10</p>
<p class="line number11 index10 alt2">11</p>
<p class="line number12 index11 alt1">12</p>
<p class="line number13 index12 alt2">13</p>
<p class="line number14 index13 alt1">14</p>
<p class="line number15 index14 alt2">15</p>
<p class="line number16 index15 alt1">16</p>
<p class="line number17 index16 alt2">17</p>
<p class="line number18 index17 alt1">18</p>
<p class="line number19 index18 alt2">19</p>
<p class="line number20 index19 alt1">20</p>
<p class="line number21 index20 alt2">21</p> <p class="line number22 index21 alt1">22</p>
<p class="line number23 index22 alt2">23</p>
<p class="line number24 index23 alt1">24</p>
<p class="line number25 index24 alt2">25</p>
<p class="line number26 index25 alt1">26 </p>
<p class="line number27 index26 alt2">27</p>
<p class="line number28 index27 alt1">28</p>
<p class="line number29 index28 alt2">29</p>
<p class="line number30 index29 alt1">30</p>
</td>
<td class="code">
<p class="container"><br></p>
<p class="line number1 index0 alt2"><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></p>
<p class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code></p>
<p class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number5 index4 alt2"><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></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">*{</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">margin:0;</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">padding:0;</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">border:0;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">.top{</code></p>
<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>🎜<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">margin-bottom: 100px;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">.bottom{</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number21 index20 alt2"><code class="html spaces"> </code><code class="html plain">margin-top: 50px;</code></p>
<p class="line number22 index21 alt1"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number23 index22 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number26 index25 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number27 index26 alt2"><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></p>
<p class="line number28 index27 alt1"><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></p>
<p class="line number29 index28 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number30 index29 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p></code>
</td>
</tr></tbody></table>
<p> 効果は以下の通りです: </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-2.png" alt=""></p>
<p> このとき、垂直方向の例は、100+50=150px ではなく、約 100px (実際には 100px) です。なぜなら <strong>2 つの垂直 2 つの方向のボックスが接するとき、それらの垂直距離は、上のボックスの下マージンと下のボックスの上マージンの大きい方に等しいからです。 </strong></p>
<p><strong> </strong></p>
<p><strong>もう一つの興味深い例は次のとおりです。 margin-top と margin-bottom が同時に設定された要素があるが、その内容が空であると仮定します。その場合、2 つの margin 値も重複します。値は 2 つのうちの最大値になります。これは、2 つのボックスのマージン値を垂直方向に重ね合わせたものと似ています。コードは次のとおりです: </strong></p>9<p class="cnblogs_Highlighter sh-gutter"><br>10</p>
<p class="syntaxhighlighter html">11 <br></p>12<table border="0"><tbody>13<tr class="firstRow">
<td class="gutter">14<p class="line number1 index0 alt2"></p>15<p class="line number2 index1 alt1"></p>16<p class="line number3 index2 alt2"></p>17<p class="line number4 index3 alt1"></p>18<p class="line number5 index4 alt2"></p>19<p class="line number6 index5 alt1"></p>20<p class="line number7 index6 alt2"></p>21<p class="line number8 index7 alt1"></p>22<p class="line number9 index8 alt2"></p>23 <p class="line number10 index9 alt1"></p>24<p class="line number11 index10 alt2"></p>25<p class="line number12 index11 alt1"></p>26<p class="line number13 index12 alt2"></p>27<p class="line number14 index13 alt1"></p> 28<p class="line number15 index14 alt2"></p> 29<p class="line number16 index15 alt1"></p>30<p class="line number17 index16 alt2"></p>31<p class="line number18 index17 alt1"></p>32<p class="line number19 index18 alt2"></p>33<p class="line number20 index19 alt1"></p>34<p class="line number21 index20 alt2"></p>
<p class="line number22 index21 alt1"></p>
<p class="line number23 index22 alt2"></p>
<p class="line number24 index23 alt1"><code class="html plain"><!</code><code class="html キーワード" >DOCTYPE</code> <code class="html plain">html></code></p>
<p class="line number25 index24 alt2"><code class="html plain"><</code><code class="html キーワード">html</ code> < code class="html plain">lang="ja"></code></p>
<p class="line number26 index25 alt1"><code class="html plain"><</code><code class="html キーワード">head< /code> <code class="html plain">></code></p>
<p class="line number27 index26 alt2"><code class="html space"> </code><code class="html plain"><</code><code class=" html キーワード">メタ</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number28 index27 alt1"><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">></p>
<p class="line number29 index28 alt2"><code class="html space"> </code><code class="html plain "><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number30 index29 alt1"><code class="html space"> code ><code class="html plain">*{</code></code></p>
<p class="line number31 index30 alt2"><code class="html space"> </code><code class="html plain">margin:0;</code></p> <p class="line number32 index31 alt1"> <code class="html space"> </code><code class="html plain">padding:0;</code></p>
<p class="line number33 index32 alt2"><code class="html space"> </code><code class=" html plain">}</code></p>
<p class="line number34 index33 alt1"> </p>
</td>
<code class="html space"> </code><code class="html plain">.top{</code><td class="code">
<p class="container"><code class=" htmlスペース"> </code><code class="html plain">幅: 500px;</code><br></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">.middle{</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">margin-top: 100px;</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">margin-bottom:50px;</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number21 index20 alt2"><code class="html spaces"> </code><code class="html plain">.footer{</code></p>
<p class="line number22 index21 alt1"><code class="html spaces"> </code><code class="html plain">width: 500px;</code></p>
<p class="line number23 index22 alt2"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number25 index24 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number26 index25 alt1"> </p>
<p class="line number27 index26 alt2"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number28 index27 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number29 index28 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number30 index29 alt1"><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></p>
<p class="line number31 index30 alt2"><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></p>
<p class="line number32 index31 alt1"><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></p>
<p class="line number33 index32 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number34 index33 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p>
</td>
</tr>
</tbody></table>
<p> 最終的な効果は以下の通りです: </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-3.png" alt=""></p>
<p> 上のpと下のpの間の例は100+50=150pxではなく、2つのうちの最大の100pxであることがわかりました。 </p>
<p><strong> </strong></p>
<p>では、なぜW3Cはそのような基準を定め、水平方向と同じ基準を定めないのでしょうか？つまり、マージン値の重ね合わせであり、実際には意味があります。たとえば、複数の段落で構成されるページをデザインする必要があります。最初の段落とページの上部との間に距離があり、最後の段落と下部の間に距離があるように、margin-top と margin-bottom を設定する必要があります。以下は、オーバーレイとオーバーレイなしのレンダリングです: </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-4.png" alt=""></p>
<p> 左側のページは重なっていないことがわかります。そのため、2 つの段落間の例では上部の間隔が 2 倍になっているのに対し、右側のページは重なっています。そうすると、すべての間隔が等しくなります。もしかしたら、これがこのような基準を設定する目的なのかもしれません、誰にもわかりません。 </p>
<p> </p>
<p> </p>
<h2>パート 3: マージン -- 親要素と子要素間の適用 (<strong>重要ポイント</strong>)</h2>
<p> 2 番目のパートでは、兄弟要素間のマージンの使用を紹介します。このパートでは、最も興味深い親のアプリケーションを紹介します。要素とサブ要素間のマージン。このパートでは、これについて 2 つの側面から説明します。一方では、子要素は水平方向のマージン値を設定し、他方では、子要素は垂直方向のマージン値を設定します。 </p>
<h3> (1) 子要素に水平方向のマージン値を設定します </h3>
<p> margin-left を設定して、子要素の左ボーダーと親要素の左ボーダーの関係を制御できます。 </p>
<p> 例3: </p>
<p class="cnblogs_Highlighter sh-gutter"><br></p>
<p class="syntaxhighlighter html"><br></p>
<table border="0"><tbody><tr class="firstRow"><td class="gutter">
<p class="line number1 index0 alt2">1</p>
<p class="line number2 index1 alt1">2</p>
<p class="line number3 index2 alt2">3</p>
<p class="line number4 index3 alt1">4</p>
<p class="line number5 index4 alt2">5</p>
<p class="line number6 index5 alt1">6</p>
<p class="line number7 index6 alt2">7 </p>
<p class="line number8 index7 alt1">8</p>
<p class="line number9 index8 alt2">9</p>
<p class="line number10 index9 alt1">10</p>
<p class="line number11 index10 alt2">11</p>
<p class="line number12 index11 alt1"> 2 4</p>
<p class="line number13 index12 alt2">25</p>
<p class="line number14 index13 alt1">26</p>
<p class="line number15 index14 alt2"></p>
<p class="line number16 index15 alt1"></p>
<p class="line number17 index16 alt2"></p> <code class="html plain"><!</code><code class="htmlKeyword">DOCTYPE</code> <code class=" html プレーン">html></code><p class="line number18 index17 alt1"></p><code class="html plain"><</code><code class="html キーワード">html</code> <code class="html plain"> lang="ja"></code><p class="line number19 index18 alt2"></p>
<code class="html plain"><</code><code class="htmlKeyword">head</code><code class="html plain" >></code><p class="line number20 index19 alt1"></p>
<code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code > <code class="html plain">charset="UTF- 8"></code><p class="line number21 index20 alt2"></p><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><p class="line number22 index21 alt1"> </p>
<code class="html space"> </code><code class="html plain"><</code><code class="htmlキーワード">スタイル</code><code class="html plain ">></code><p class="line number23 index22 alt2"></p>
<code class="html space"> </code><code class="html plain">*{padding :0; マージン:0; ボーダー:0;}</code><p class="line number24 index23 alt1"></p>
<code class="html space"> </code><code class="html plain">.father{</code><p class="line number25 index24 alt2"></p> <code class="html plain">width: 500px;</code><p class="line number26 index25 alt1"></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">height: 500px;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">.son{</code></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">margin-left: 100px;</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number21 index20 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number22 index21 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p>
<p class="line number23 index22 alt2"><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></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p>
<p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p>
</td></tr></tbody></table>
<p> 子要素の margin-left を 100px に設定しました; 効果は次のとおりです: </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-5.png" alt="" style="max-width:90%" style="max-width:90%"></p>
<p> つまり、子要素の左境界線と親要素の左境界線の間の距離は 100px です。 <strong>同じレベルの要素間のマージンはパディングを考慮しないため、同じレベルの要素間のマージンの設定とは異なりますが、親要素と子要素の間では異なります。親要素にパディングがあるのはどうですか？ </strong>次の例を見てください: </p>
<p> 例4:</p>
<p> ここで、上記の例に基づいて親要素にパディング値を追加します。 </p>
<p class="cnblogs_Highlighter sh-gutter"><br></p>
<p class="syntaxhighlighter html"><br></p>
<table border="0"><tbody><tr class="firstRow">
<td class="gutter">
<p class="line number1 index0 alt2">1</p>
<p class="line number2 index1 alt1">2</p>
<p class="line number3 index2 alt2">3</p>
<p class="line number4 index3 alt1">4</p>
<p class="line number5 index4 alt2">5</p>
<p class="line number6 index5 alt1">6</p>
<p class="line number7 index6 alt2">7</p>
<p class="line number8 index7 alt1">8</p>
<p class="line number9 index8 alt2">9 </p>
<p class="line number10 index9 alt1">10</p>
<p class="line number11 index10 alt2">11</p>
<p class="line number12 index11 alt1">12</p>
<p class="line number13 index12 alt2">13</p> <p class="line number14 index13 alt1">14</p>
<p class="line number15 index14 alt2">15</p>
<p class="line number16 index15 alt1">16</p>
<p class="line number17 index16 alt2">17</p>
<p class="line number18 index17 alt1">18</p>
<p class="line number19 index18 alt2">19</p>
<p class="line number20 index19 alt1">20</p>
<p class="line number21 index20 alt2">21</p>
<p class="line number22 index21 alt1">22</p>
<p class="line number23 index22 alt2">23</p>
<p class="line number24 index23 alt1">24</p>
<p class="line number25 index24 alt2">25</p> <p class="line number26 index25 alt1">26</p>
<p class="line number27 index26 alt2">27</p>
</td>
<td class="code">
<p class="container"><br></p>
<p class="line number1 index0 alt2"><!</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></p>
<p class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code></p>
<p class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number5 index4 alt2"><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></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">.father{</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">width: 500px;</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">height: 500px;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">padding:100px;</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">.son{</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<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> 🎜<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">margin-left: 100px;</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number22 index21 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number23 index22 alt2"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p>
<p class="line number24 index23 alt1"><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></p>
<p class="line number25 index24 alt2"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p>
<p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number27 index26 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p></code>
</td>
</tr></tbody></table>
<p> 上記のコードは、親要素に 100px のパディング値を追加します。効果は次のとおりです。 </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-6.png" alt="" style="max-width:90%" style="max-width:90%"></p>
<p>子要素はコンテンツ部分にある必要があるため、子要素の上の距離が 100px であることがわかります。これは間違いなく親要素です。 </p>
<p><strong>しかし、測定後、子要素の左境界線と親要素の左境界線の間の距離は 200px</strong> であることがわかります。これは、前の例では左パディング値も 100px であるためです。パディング値を設定していないので、観察しませんでした。<strong>これは、margin-left が子要素に設定されていることを示しており、その値は実際には子要素の左境界線と親要素の左パディングの内側。 </strong></p>
<p> </p>
<p>例 5: margin-right の使用は margin-left の使用と似ています。ここでは例のみを示します。 </p>
<p> この例では、子要素の margin-right の値を次のように設定します。 </p>
<p class="cnblogs_Highlighter sh-gutter">7 <br></p> 8<p class="syntaxhighlighter html"><br>9</p>
<table border="0">10<tbody><tr class="firstRow">11<td class="gutter">
<p class="line number1 index0 alt2">12</p>
<p class="line number2 index1 alt1">13</p>
<p class="line number3 index2 alt2">14</p>
<p class="line number4 index3 alt1">15</p>
<p class="line number5 index4 alt2">16</p>
<p class="line number6 index5 alt1">17</p>
<p class="line number7 index6 alt2">18</p>
<p class="line number8 index7 alt1">19</p>
<p class="line number9 index8 alt2">20 </p>
<p class="line number10 index9 alt1">21</p>
<p class="line number11 index10 alt2">22</p>
<p class="line number12 index11 alt1">23</p>
<p class="line number13 index12 alt2">24</p> <p class="line number14 index13 alt1">25</p>
<p class="line number15 index14 alt2">26</p>
<p class="line number16 index15 alt1">27</p>
<p class="line number17 index16 alt2">28</p>
<p class="line number18 index17 alt1"></p>
<p class="line number19 index18 alt2"></p>
<p class="line number20 index19 alt1"></p>
<code class="html plain"><!</code><code class="htmlKeyword">DOCTYPE</code> <code class="html plain">html></code><p class="line number21 index20 alt2"></p>
<code class="html plain"><</code><code class="html キーワード">html</code> <code class= "html plain">lang="ja"></code><p class="line number22 index21 alt1"></p>
<code class="html plain"><</code><code class="html キーワード">head</code><code class =" html プレーン">></code><p class="line number23 index22 alt2"></p>
<code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset="UTF-8"> </code><p class="line number24 index23 alt1"></p>
<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><p class="line number25 index24 alt2"></p>
<code class="html space"> </code><code class="html plain"><</code>< コードクラス="html キーワード">スタイル</code><code class="html plain">></code><p class="line number26 index25 alt1"></p>
<code class="html space"> </code><code class="html plain "> *{padding:0; margin:0;}</code><p class="line number27 index26 alt2"></p>
<code class="html space"> code><p class="line number28 index27 alt1"></p>
<code class="html space"> </code><code class="html plain">幅: 500px;</code></code>
</td>
<td class="code">
<code class="html space"> </code>高さ: 500px;<p class="container"><br><code class="html space"> </code><code class="html plain">padding:100px;</code></p>
<p class="line number1 index0 alt2"> <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></p>
<p class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code></p>
<p class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number5 index4 alt2"><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></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">.father{</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">width: 500px;</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">height: 500px;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">padding:100px;</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<code class="html space"> </code><code class="html plain">}</code>🎜<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">.son{</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">float: right;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">margin-right: 100px;</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number21 index20 alt2"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number23 index22 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p>
<p class="line number25 index24 alt2"><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></p>
<p class="line number26 index25 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p>
<p class="line number27 index26 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number28 index27 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p>
</td>
</tr></tbody>
</table>
<p> この例と例4の違いは子要素の位置のみです。効果は次のとおりです: </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-7.png" alt="" style="max-width:90%" style="max-width:90%"></p>
<p> この例では、margin-right の値が子要素の右境界線と親要素 <strong> の右パディングの内側の間の距離であることを示しています。前の例ではパディングを使用しなかったため、それを観察できなかっただけです。 </strong></p> <p></p> <p></p> <p></p> (2) 子要素に垂直マージンの値を設定する<h3></h3> これまでの経験によれば、理論的には、margin-topの値を設定して子要素の上端を作ることも可能です<p>親要素の上部パディングの内側から一定の距離 <strong> を残します。それでは試してみましょう! </strong></p> 例6:<p></p> <p>6 </p>
<p class="cnblogs_Highlighter sh-gutter">7<br></p>8<p class="syntaxhighlighter html"><br>9</p>
<table border="0">10<tbody><tr class="firstRow">11<td class="gutter">
<p class="line number1 index0 alt2">12</p>
<p class="line number2 index1 alt1">13</p>
<p class="line number3 index2 alt2">14</p>
<p class="line number4 index3 alt1">15</p>
<p class="line number5 index4 alt2">16</p>
<p class="line number6 index5 alt1">17</p>
<p class="line number7 index6 alt2">18</p> <p class="line number8 index7 alt1">19</p>
<p class="line number9 index8 alt2"> 20</p>
<p class="line number10 index9 alt1">21</p>
<p class="line number11 index10 alt2">22</p>
<p class="line number12 index11 alt1">23</p>
<p class="line number13 index12 alt2">24</p>
<p class="line number14 index13 alt1">25</p>
<p class="line number15 index14 alt2">26</p>
<p class="line number16 index15 alt1"></p>
<p class="line number17 index16 alt2"></p> <p class="line number18 index17 alt1"></p>
<code class="html plain"><!</code><code class="html キーワード" >DOCTYPE</code> <code class="html plain">html></code><p class="line number19 index18 alt2"></p>< code class="html plain"><</code><code class="html key">html</ code> <code class="html plain">lang="ja"></code><p class="line number20 index19 alt1"></p> <code class="html plain"><</code><code class="html キーワード">head< /code><code class="html plain">></code><p class="line number21 index20 alt2"></p>
<code class="html space"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset=" UTF-8"></code><p class="line number22 index21 alt1"></p>
<code class="html space"> </code><</code><code class="htmlKeyword">タイトル </code><code class="html plain">>margin</</code><code class= "html キーワード">タイトル</code><code class="html plain">><p class="line number23 index22 alt2"></p>
<code class="html space"> </code><code class="html plain">< ;</code><code class="html キーワード">スタイル</code><code class="html plain">></code><p class="line number24 index23 alt1"></p>
<code class="html スペース"> </code>*{padding:0; border:0;}<p class="line number25 index24 alt2"></p>
<code class="html space"> </code><code class="html plain">.father{</code><p class="line number26 index25 alt1"></p>
<code class="html space"> </code>幅: 500px;</td>
<td class="code">
<code class="html space"> </code><code class="html plain">高さ: 500px;</code><p class="container"><br> <code class="html space"> </code><code class="html plain">背景: 赤; </code></p>
<p class="line number1 index0 alt2"><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></p>
<p class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code></p>
<p class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number5 index4 alt2"><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></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">*{padding:0; margin:0; border:0;}</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">.father{</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">width: 500px;</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">height: 500px;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">.son{</code></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<code class="htmlスペース">><p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">margin-top: 100px;</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number21 index20 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number22 index21 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p>
<p class="line number23 index22 alt2"><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></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p>
<p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p></code>
</td>
</tr></tbody>
</table>
<p> この例では、margin-top を 100px に設定し、その効果は次のようになります。 </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-8.png" alt="" style="max-width:90%" style="max-width:90%"></p>
<p><strong>これは私たちが望む効果ではありません。子要素の上部が 100px 離れていることを望みます。親要素の上部が表示されますが、親要素の上部がブラウザ ページの上部から 100 ピクセル離れています。これはなぜでしょうか。何が悪かったのか？ </strong></p>
<p><strong> </strong></p>
<p><strong>実はこれは、親要素にpadding値とborder値を設定していない場合、親要素の上部と子要素の上部が完全に重なって分離できないというバグが発生するためです。そのため、上記の親要素と子要素が同時に下に移動します。 </strong></p>
<p><strong>この問題にはいくつかの解決策があります: </strong></p>
<ul class=" list-paddingleft-2">
<li><p><strong>方法 1: <a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a> 値を追加する</strong></p></li>
<li><p><strong>方法 2: ボーダー値を親要素に追加する</strong> </p></li>
<li> <p><strong>メソッド3: 属性 overflow:hidden;</strong></p>
</li>
<li><p><strong>を追加する 方法 4: 親要素または子要素に float を宣言する</strong></p></li>
<li><p><strong> 方法 5: 親要素または子要素を<a href="http://www.php.cn/code/6074.html" target="_blank">絶対位置として宣言する</a>: Position:absolute;</strong></p></li>
<li><p><strong>メソッド 6: 親要素に属性を追加します</strong> overflow:auto; positon:relative; (注: このメソッドは、ブロガー @SmallelvesPawn に提供していただいたので、後で追加します)</p></li> </ul>
<p> <strong>方法 1: 例 6 に基づいて、親要素の CSS コードに padding-top:1px を追加します。効果は次のとおりです。</strong></p>
<p><strong><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-9.png" alt="" style="max-width:90%" style="max-width:90%"></strong></p>
<p></p>
<p><strong> この方法の唯一の欠点は次のとおりです。 1pxの誤差が増えるということです。 </strong></p>
<p><strong> </strong></p>
<p><strong> 方法 2: 例 6 に基づいて、親要素の CSS コードに border-top:1px ソリッド透明を追加します。効果は次のとおりです。同じ効果が得られますが、欠点は方法 1 と同じです。 </strong></p>
<p><strong> <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-10.png" alt="" style="max-width:90%" style="max-width:90%"></strong></p>
<p> 方法 3: 例 6 に基づいて、親要素の CSS コードに overflow: hidden を追加します。効果は次のとおりです。同じ効果が得られ、エラーは存在しません。完璧です!!!!</p>
<p><strong></strong> </p>
<p><strong></strong> 方法 4: 例 6 に基づいて float を親要素または子要素に宣言し、子要素の CSS コードに float:left を追加するか、親要素の CSS コードに float を追加します。 css コード: left; 効果が得られ、同じ画像はここには表示されなくなりました。 </p>
<p><strong></strong> 利点: ピクセルエラーがありません。 欠点: float が不要な場合があります。 </p>
<p><strong> <strong><img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-11.png" alt="" style="max-width:90%" style="max-width:90%"></strong> 方法 5:position:absolute; 属性を親要素または子要素に追加します。 同様の効果が得られます。 </strong></p>
<p></p> 利点: 方法 4 と同じ。 また、上と左を使わない限り影響はないので、これも良い方法です。 <p><strong></strong> (説明: ブログ友達の @laden666666 は、上記のメソッド 3、4、5 は、実際には親コンテナを貫通しないように子要素のマージンを削除するメソッドであると指摘しました。これらは BFC メソッドとして分類でき、本質的には同じです。感謝の意を表します) </p> <p> <strong>方法 6: 同じ効果を達成するには、overflow:auto とposition:relative; を追加します。 </strong></p>
<p><strong> この方法は個人的にテストされており、効果的です。感謝の意を表します。 </strong></p>
<p> <strong></strong> </p>
<p>その4: margin 値の単位が %</p>
<p> の場合のいくつかの状況 以前に例を示したときに margin を使用しましたが、その値はすべて px 単位なので、理解するのに問題はありません。 <strong>しかし、マージン値が % の場合はどうなるでしょうか?実はこのときのパーセンテージ(%)はその要素の親要素(コンテナ)に対する相対的なものであり、兄弟要素でも親子要素でも同様です。 (</strong>ブロガー @小エルフPawn からの提案に改めて感謝します!! この提案に基づいて、コンテンツのこの部分を補足します) ただし、同じレベルの要素に垂直マージンを使用すると、予期しない結果が発生します。以下に例を示します。 </p>
<p> (1)同じレベルの要素は横方向に%のマージンを使用します。</p>
<p class="line number4 index3 alt1">4</p>
<p class="line number5 index4 alt2">5</p>
<p class="line number6 index5 alt1">6</p>
<p class="line number7 index6 alt2">7</p>
<p class="line number8 index7 alt1">8</p>
<p class="line number9 index8 alt2">9</p>
<p class="line number10 index9 alt1">10</p>
<p class="line number11 index10 alt2">11</p>
<p class="line number12 index11 alt1">12</p>
<p class="line number13 index12 alt2">13</p>
<p class="line number14 index13 alt1">14</p>
<p class="line number15 index14 alt2">15</p>
<p class="line number16 index15 alt1">16 </p>
<p class="line number17 index16 alt2">17</p>
<p class="line number18 index17 alt1">18</p>
<p class="line number19 index18 alt2">19</p>
<p class="line number20 index19 alt1">20 </p>
<p class="line number21 index20 alt2">21</p>
<p class="line number22 index21 alt1">22</p>
<p class="line number23 index22 alt2">23</p>
<p class="line number24 index23 alt1">24</p>
<p class="line number25 index24 alt2">25</p>
<p class="line number26 index25 alt1">26</p>
<p class="line number27 index26 alt2">27</p>
<p class="line number28 index27 alt1">28</p>
<td class="code">
<p class="container"><br></p>
<p class="line number1 index0 alt2"><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></p>
<p class="line number2 index1 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number3 index2 alt2"><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></p>
<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number5 index4 alt2"><code class="html spaces"> </code><code class="html plain">*{</code></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain">margin:0;</code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">padding:0;</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">.first{</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">float: left;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">width: 200px;</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">height: 200px;</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">.second{</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">float: left;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">width: 200px;</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">height: 200px;</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain">margin-left: 20%;</code></p>
<p class="linenumber2index1 alt1"><code class="html space"> </code> <code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code> ></p>
<p class="linenumber3index2alt2"><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>🎜<p class="line number21 index20 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number22 index21 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number23 index22 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number24 index23 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number25 index24 alt2"><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></p>
<p class="line number26 index25 alt1"><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></p>
<p class="line number27 index26 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number28 index27 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p></code></p>
</td>
<p> </p>
<p> この例では、2 つの要素の水平方向のマージンが簡単に確認できるように、2 つの要素が左側にフロートするように設定されています。このうち、左の p にはマージンがなく、右の p のマージン左は 20% です。 </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-12.gif" alt="" style="max-width:90%" style="max-width:90%"></p>
<p><strong> レンダリングから、2 つの p 間の距離が次のようになります。常に親要素です (ここでは、右側の p の親要素は本文であり、その幅はブラウザの幅の 20% です)。 </strong></p>
<p> </p>
<p> </p>
<h3>この場合、2 つの間の最終的な距離は、親要素 (上の例では body) のパーセンテージになります。では、これは本当にそうなのでしょうか？以下の例を参照してください。 </h3>
<p></p>例8<p><strong></strong></p>
<p class="cnblogs_Highlighter sh-gutter"><br></p>
<p class="syntaxhighlighter html"><br></p>
<table border="0"><tbody>1<tr class="firstRow">
<td class="gutter">2<p class="line number1 index0 alt2"></p>3<p class="line number2 index1 alt1"></p>4<p class="line number3 index2 alt2"></p>5<p class="line number4 index3 alt1"></p>6<p class="line number5 index4 alt2"></p>7 <p class="line number6 index5 alt1"></p>8<p class="line number7 index6 alt2"></p>9<p class="line number8 index7 alt1"></p>10<p class="line number9 index8 alt2"></p>11<p class="line number10 index9 alt1"> </p>12<p class="line number11 index10 alt2"></p>13<p class="line number12 index11 alt1"></p>14<p class="line number13 index12 alt2"></p>15<p class="line number14 index13 alt1"></p>16<p class="line number15 index14 alt2"></p>17<p class="line number16 index15 alt1"></p>18<p class="line number17 index16 alt2"></p>19<p class="line number18 index17 alt1"></p>20<p class="line number19 index18 alt2"></p>21<p class="line number20 index19 alt1"></p>22<p class="line number21 index20 alt2"></p>23<p class="line number22 index21 alt1"> </p>24<p class="line number23 index22 alt2"></p>25<p class="line number24 index23 alt1"></p>26<p class="line number25 index24 alt2"></p>
<p class="line number26 index25 alt1"></p>
</td>
<td class="code"> <p class="container"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code><br></p>
<code class="html スペース"> </code><code class="html plain"><</code><code class="html キーワード">メタ</code> <code class="html plain">charset= "UTF-8"></code><p class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number2 index1 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number3 index2 alt2"><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></p>
<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number5 index4 alt2"><code class="html spaces"> </code><code class="html plain">*{</code></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain">margin:0;</code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">padding:0;</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">.first{</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">width: 200px;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">height: 200px;</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number14 index13 alt1"><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></p>🎜<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>🎜<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">width: 200px;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">height: 200px;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">margin-top: 10%;</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number22 index21 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number23 index22 alt2"><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></p>
<p class="line number24 index23 alt1"><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></p>
<p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p>
</td>
</tr>
</tbody></table>
<p>ここでは、上の p にはマージンがなく、下の p のマージントップは 10 です。効果は次のとおりです。 </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/73737215d222f61d1e7c7f1447c45d1b-13.gif" alt="" style="max-width:90%" style="max-width:90%"></p>
<p><strong> </strong></p>
<p><strong> ブラウザの高さを減らしても、垂直方向の間隔は縮まらないことがわかりました。 ！ ！ そしてブラウザの横幅を小さくすると縦方向の距離が縮まります！ ！ ！ </strong></p>
<p><strong>これは、マージンが統計要素間の垂直方向に使用されることを意味します。値の単位が % の場合、親要素の幅を基準とします。 </strong></p>
<p><strong> では、ブラウザに対する相対的な高さが希望通りにならないのはなぜでしょうか? Zhihu のマスターはこのように説明しました (元のアドレス: https://www.zhihu.com/question/20983035?rf=27109182): </strong></p>
<p><strong><img src="https://img.php.cn/upload/article/000/000/007/ba8858fe462ad9a8fb9cdcbc308e9ef1-14.png" alt="" style="max-width:90%" style="max-width:90%"></strong></p>
<p> </p>
<h3></h3>
<h3></h3>
<h3> (3) 父親と子要素は、%</h3>
<p>の値を持つマージンを使用します。親要素を基準とした高さ)! <strong></strong></p> <p>例9 <strong></strong></p>
<p> <strong>コードは次のとおりです。 </strong></p>4<p class="cnblogs_Highlighter sh-gutter"><br>5</p>
<p class="syntaxhighlighter html">6<br></p>7<table border="0"><tbody> 8<tr class="firstRow">
<td class="gutter">9<p class="line number1 index0 alt2"></p>10<p class="line number2 index1 alt1"></p>11<p class="line number3 index2 alt2"></p>12<p class="line number4 index3 alt1"></p>13<p class="line number5 index4 alt2"></p>14<p class="line number6 index5 alt1"></p>15<p class="line number7 index6 alt2"></p>16<p class="line number8 index7 alt1"></p>17<p class="line number9 index8 alt2"></p>18<p class="line number10 index9 alt1"></p>19<p class="line number11 index10 alt2"></p>20 <p class="line number12 index11 alt1"></p>21<p class="line number13 index12 alt2"></p>22<p class="line number14 index13 alt1"></p>23<p class="line number15 index14 alt2"></p>24<p class="line number16 index15 alt1"> </p>25<p class="line number17 index16 alt2"></p>26<p class="line number18 index17 alt1"></p>27<p class="line number19 index18 alt2"></p>28<p class="line number20 index19 alt1"></p>29<p class="line number21 index20 alt2"></p>30<p class="line number22 index21 alt1"></p>31<p class="line number23 index22 alt2"></p>
<p class="line number24 index23 alt1"></p>
<p class="line number25 index24 alt2"></p>
<p class="line number26 index25 alt1"><code class="html plain"><!</code><code class="html キーワード">DOCTYPE </code> <code class="html plain">html></code></p>
<p class="line number27 index26 alt2"><code class="html plain"><</code><code class="html キーワード">html< /code> <code class="html plain">lang="ja"></code></p>
<p class="line number28 index27 alt1"><code class="html plain"><</code><code class="html キーワード">head </code ><code class="html plain">></code></p>
<p class="line number29 index28 alt2"><code class="html space"> </code><code class="html plain"><</code>< code class= "html キーワード">メタ</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number30 index29 alt1"><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></p>
<p class="line number31 index30 alt2"><code class="html space"> </code><code class="html plain"> << /code><code class="html キーワード">スタイル</code><code class="html plain">></code></p>
</td>
<code class="html space"> </code> <code class="html plain">*{</code><td class="code">
<p class="container"><code class="html space"> </code><code class="html plain">margin:0;</code><br></p> <code class="html plain">padding:0;</code><p class="line number1 index0 alt2"><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code></p>
<p class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code></p>
<p class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number4 index3 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p>
<p class="line number5 index4 alt2"><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></p>
<p class="line number6 index5 alt1"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number7 index6 alt2"><code class="html spaces"> </code><code class="html plain">*{</code></p>
<p class="line number8 index7 alt1"><code class="html spaces"> </code><code class="html plain">margin:0;</code></p>
<p class="line number9 index8 alt2"><code class="html spaces"> </code><code class="html plain">padding:0;</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">}</code><code class="html space"> }</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">.father{</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">width: 500px;</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">height: 300px;</code></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">background: red;</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">overflow: hidden;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">.son{</code></p>
<p class="line number18 index17 alt1"><code class="html spaces"> </code><code class="html plain">width: 100px;</code></p>
<p class="line number19 index18 alt2"><code class="html spaces"> </code><code class="html plain">height: 100px;</code></p>
<p class="line number20 index19 alt1"><code class="html spaces"> </code><code class="html plain">background: green;</code></p>
<p class="line number21 index20 alt2"><code class="html spaces"> </code><code class="html plain">margin-top: 20%;</code></p>
<p class="line number22 index21 alt1"><code class="html spaces"> </code><code class="html plain">margin-left: 20%;</code></p>
<p class="line number23 index22 alt2"><code class="html spaces"> </code><code class="html plain">}</code></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p>
<p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p>
<p class="line number26 index25 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number27 index26 alt2"><code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p>
<p class="line number28 index27 alt1"><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></p>
<p class="line number29 index28 alt2"><code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p>
<p class="line number30 index29 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number31 index30 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p>
</td>
</tr>
</tbody></table>
<p> この例では、左マージンの値を 20%、マージンの上の値を 20%、<strong>親要素の幅を 500px、親要素の高さを に設定します。 300ピクセル。 </strong>以下で効果を見てみましょう。 </p>
<p><img src="https://img.php.cn/upload/article/000/000/007/856d2f11c3d8af9a226d1a5f5414cef7-15.png" alt="" style="max-width:90%" style="max-width:90%"></p>
<p>上の図<strong>からわかるように、子要素のマージントップの値は、最終的には高さではなく、親要素の幅に相対します。 </strong></p>
以上がCSS の margin 属性についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。