Compréhension approfondie de l'attribut margin en CSS-tutoriel CSS-php.cn

Compréhension approfondie de l'attribut margin en CSS Je pensais que l'attribut margin est un attribut très simple, mais récemment j'ai rencontré quelques problèmes en travaillant sur un projet, et j'ai découvert que le L'attribut margin a encore quelques "puits", ci-dessous je présenterai les connaissances de base sur la marge et ces "puits". Cet article de blog est principalement divisé en parties suivantes : <ul class=" list-paddingleft-2"> <li>marge--connaissances de base</li> <li>marge--au même niveau élément (non -parent-enfant Appliquer </li> <li>marge entre relation) --Appliquer (accentuation) entre l'élément parent et l'élément enfant </li> <li> marge --Plusieurs situations où l'unité de valeur de marge est % </li> </ul> <h2>Partie 1 : marge--Connaissances de base</h2> Pour présenter les bases de margin Knowledge, on ne peut éviter de parler du <a href="http://www.php.cn/code/790.html" target="_blank">modèle de boîte CSS</a> (Box Model) De manière générale, le modèle de boîte CSS est utilisé pour la conception et la mise en page. Il s'agit essentiellement d'une boîte comprenant : la marge, la bordure, le remplissage et le contenu intermédiaire. L'image ci-dessous est le modèle de boîte (ici nous ne parlons que du modèle de boîte standard de la spécification W3C, pas du modèle de boîte non standard utilisé par IE5 et IE6 en mode bizarre) : <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-0.png" alt="" style="max-width:90%" style="max-width:90%"> La marge que nous allons introduire se trouve sur le calque le plus externe. Parce que la marge (marge) doit être transparente, elle peut être utilisée pour laisser un certain espace entre les différentes boîtes afin d'obtenir une belle mise en page et d'autres effets. À partir du modèle de boîte ci-dessus, nous pouvons voir que des marges existent tout autour. Nous pouvons utiliser 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> et margin-left pour les définir respectivement. . Valeurs de marge dans quatre directions. (Remarque : Cette partie des connaissances étant relativement basique, je n'en présenterai pas davantage dans cette partie) <h2>Partie 2 : marge --en même temps Application de </h2> entre éléments de niveau (relation non parent-enfant) Cette partie introduit principalement la fusion des marges horizontales et verticales. <h2> (1) Les marges horizontales fusionnent </h2> 　 Deux cases horizontales se rencontrent, puis la distance finale entre elles est la marge droite de la case de gauche et la case de droite fait la somme des marges . Exemple 1 : Le code est le suivant : <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 35 36 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">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">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> L'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-1.png" alt=""> À ce moment, la distance entre les deux est exactement de 100px. Explication supplémentaire : Comme vous pouvez le voir, afin de faire sortir les deux p (éléments de bloc) du flux de documents normal, j'ai utilisé l'attribut display:inline-block; De plus, j'ai mettez également le corps Définissez la taille de la police sur 0, ce qui peut résoudre le problème du blocage en ligne lui-même ( Si vous n'êtes pas clair sur la description ici, vous pouvez lire mon article de blog "Comprendre et appliquer l'attribut d'affichage en CSS ", cet article présente les problèmes existants en bloc en ligne ), sinon les deux p exemples seront plus grands que 100 px. Bien entendu, vous pouvez également utiliser float pour faire apparaître deux p sur la même ligne. <h2> (2) Les marges verticales fusionnent </h2> Lorsque deux cases verticales se rencontrent, la distance verticale est égale à la case du dessus La plus grande de la marge inférieure du case ci-dessous et la marge supérieure de la case ci-dessous. Exemple 2 : > 1 2 <table border="0">3<tbody><tr class="firstRow">4<td class="gutter"> 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="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">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> </td> </tr></tbody> </table> L'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-2.png" alt=""> À ce moment, nous pouvons l'observer à l'œil nu. La direction verticale des deux exemples est d'environ 100px (en fait 100px. ) au lieu de 100+50 =150px ; C'est précisément parce que lorsque deux cases verticales se rencontrent, la distance verticale est égale à la plus grande entre la marge inférieure de la case supérieure et la marge supérieure de la case inférieure. 　 Un autre exemple intéressant est : supposons qu'il y ait un élément avec margin-top et margin-bottom définis en même temps, mais le le contenu est vide, alors les deux valeurs de marge seront également superposées, et la valeur sera la plus grande des deux. C'est similaire à la superposition des valeurs de marge de deux cases dans le sens vertical. Le code est le suivant : <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 </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">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">}</code> <code class="html spaces"> </code><code class="html plain">.top{</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: 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> L'effet final est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-3.png" alt=""> Nous avons constaté que l'exemple entre le p ci-dessus et le p ci-dessous n'est pas 100+50=150px, mais le plus grand des les deux, soit 100px. 　 Alors pourquoi le W3C fixe-t-il une telle norme au lieu de fixer la même norme que la direction horizontale ? C’est-à-dire la superposition des valeurs de marge, ce qui a du sens. Par exemple, nous devons concevoir une page composée de plusieurs paragraphes. Nous devons définir margin-top et margin-bottom de manière à ce qu'il y ait une distance entre le premier paragraphe et le haut de la page, et une distance entre le dernier paragraphe et le bas. Voici les rendus sans superposition et superposition : <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-4.png" alt=""> On voit que la page de gauche ne se chevauche pas, donc l'exemple entre les deux paragraphes est le double de l'espacement à le haut et la page de droite se chevauchent, tous les espacements sont égaux. C’est peut-être le but d’établir des normes comme celle-ci, qui sait ? <h2>Partie 3 : marge - appliquée entre les éléments parents et les éléments enfants (Points clés)</h2> Deuxième partie introduit l'utilisation de la marge entre les éléments frères et sœurs, et cette partie présentera l'application la plus intéressante de la marge entre les éléments parents et les éléments enfants. Dans cette partie, nous en discutons également sous deux aspects. D'une part, les éléments enfants définissent la valeur de marge dans le sens horizontal et, d'autre part, les éléments enfants définissent la valeur de marge dans le sens vertical. <h3> (1) Définir la valeur de la marge horizontale dans l'élément enfant </h3> Nous pouvons définir margin-left pour contrôler la relation entre la bordure gauche de l'élément enfant et la bordure gauche de l'élément parent . Exemple 3 : <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 </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">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 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> J'ai défini la marge gauche de l'élément enfant sur 100px ; l'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-5.png" alt="" style="max-width:90%" style="max-width:90%"> C'est-à-dire la distance entre la bordure gauche de l'élément enfant et la bordure gauche de l'élément parent est de 100 px. C'est différent de définir une marge entre les éléments du même niveau, car la marge entre les éléments du même niveau ne prend pas en compte le remplissage, mais elle est différente entre l'élément parent et l'élément enfant s'il y a un remplissage. l'élément parent, l'effet sera Quel genre ? Veuillez consulter l'exemple suivant : Exemple 4 : Ensuite, nous ajoutons une valeur de remplissage à l'élément parent en fonction de l'exemple ci-dessus. <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 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 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> Le code ci-dessus ajoute une valeur de remplissage de 100px à l'élément parent. L'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-6.png" alt="" style="max-width:90%" style="max-width:90%"> Nous pouvons voir que la distance au-dessus de l'élément enfant est de 100px. , car l'élément enfant Il doit être dans la partie contenu de l'élément parent, cela ne fait aucun doute. Mais après mesure, on peut constater que la distance entre la bordure gauche de l'élément enfant et la bordure gauche de l'élément parent est de 200px, car il y a aussi une valeur de remplissage gauche de 100px. L'exemple précédent est parce que I La valeur de remplissage n'est pas définie, elle n'est donc pas observée Par conséquent, cela signifie que margin-left est défini dans l'élément enfant. Sa valeur est en fait la distance entre la bordure gauche. de l’élément enfant et l’intérieur du remplissage gauche de l’élément parent. Exemple 5 : L'utilisation de margin-right est similaire à l'utilisation de margin-left Je ne donnerai ici qu'un exemple. Cet exemple définit la valeur de marge droite dans l'élément enfant comme suit : <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 </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">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">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> La différence entre cet exemple et l'exemple 4 réside uniquement dans la position des éléments enfants. L'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-7.png" alt="" style="max-width:90%" style="max-width:90%"> Cet exemple de peut illustrer que la valeur de margin-right est la distance entre la bordure droite de l'élément enfant et l'intérieur du remplissage droit de l'élément parent. C'est juste que je n'ai pas utilisé de remplissage dans les exemples précédents, donc je n'ai pas pu l'observer. <h3> (2) Définir la valeur de la marge verticale dans l'élément enfant </h3> Selon l'expérience précédente, théorie Parlant de celui-ci, nous pouvons également définir la valeur de margin-top de sorte qu'il y ait une certaine distance entre la bordure supérieure de l'élément enfant et l'intérieur du remplissage supérieur de l'élément parent. Alors essayons ! Exemple 6 : <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 </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">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 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> </td> </tr></tbody></table> Dans cet exemple, j'ai réglé la marge supérieure à 100px, et l'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-8.png" alt="" style="max-width:90%" style="max-width:90%"> Ce n'est pas l'effet que nous souhaitons, nous Je veux que les éléments enfants soient La partie supérieure est à 100 px de la partie supérieure de l'élément parent, mais ce que nous voyons, c'est que la partie supérieure de l'élément parent est à 100 px de la partie supérieure de la page du navigateur. Pourquoi est-ce ? Qu'est-ce qui n'a pas fonctionné ? 　 En fait, c'est parce que lorsque l'élément parent ne définit pas la valeur de remplissage et la valeur de bordure, un bug se produit - l'élément parent element's Le haut et le haut de l'élément enfant se chevauchent complètement et ne peuvent pas être séparés. C'est pourquoi l'élément parent et l'élément enfant mentionnés ci-dessus se déplacent vers le bas en même temps. Il existe plusieurs solutions à ce problème : <ul class=" list-paddingleft-2"> <li>Méthode 1 : Ajouter padding -top<a href="http://www.php.cn/wiki/949.html" target="_blank"> valeur</a></li> <li>Méthode 2 : Ajouter une valeur de bordure à l'élément parent</li> <li> Méthode 3 : Ajouter l'attribut overflow:hidden; </li> <li>Méthode 4 : Déclarer float </li> <li> Méthode 5 : Déclarer l'élément parent ou l'élément enfant comme position absolue<a href="http://www.php.cn/code/6074.html" target="_blank"> : position:absolute;</a> </li> <li> Méthode 6 : Ajouter attributs à l'élément parent overflow:auto; positon:relative; (Remarque : cette méthode sera ajoutée plus tard, merci au blogueur @小elvesPawn d'avoir fourni cette méthode) </li> </ul>　Méthode 1 : Basé sur l'exemple 6, ajoutez padding-top:1px dans le code CSS de l'élément parent ; l'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-9.png" alt="" style="max-width:90%" style="max-width:90%"> Le seul inconvénient de la méthode est qu'elle augmente l'erreur de 1px. 　 Méthode 2 : Basée sur l'exemple 6, ajoutez border-top:1px solid transparent dans le code CSS de l'élément parent ; l'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-10.png" alt="" style="max-width:90%" style="max-width:90%"> obtient également le même effet, mais les inconvénients sont les mêmes comme première méthode. 　 Méthode 3 : Basée sur l'exemple 6, ajoutez overflow : caché dans le code css de l'élément parent l'effet est le suivant ; : 　<img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-11.png" alt="" style="max-width:90%" style="max-width:90%"> obtient également l'effet sans aucune erreur. C'est parfait !!! Ajoutez float:left; au code CSS ou ajoutez float:left; au code CSS de l'élément parent pour obtenir l'effet suivant. Avantages : Aucune erreur de pixel. Inconvénients : float est parfois inutile. Méthode 5 : Ajoutez l'attribut position:absolute; à l'élément parent ou à l'élément enfant. Le même effet est obtenu. Avantages : Identique à la quatrième méthode. Et tant que nous n'utilisons pas top et left, il n'y aura aucun impact, c'est donc aussi une bonne méthode. (Explication : l'ami du blog @laden666666 a souligné que les méthodes trois, quatre et cinq ci-dessus sont en fait des méthodes permettant d'empêcher la marge des éléments enfants de pénétrer dans le conteneur parent. Elles peuvent être classées comme bfc méthodes, qui sont essentiellement les mêmes. Merci ici) Méthode 6 : Ajoutez overflow:auto et position:relative à l'élément parent pour obtenir le même effet. Cette méthode a été testée personnellement et est efficace. Elle est fournie par le blogueur @小elvesPawn. Je tiens à exprimer ma gratitude. Partie 4 : Plusieurs situations où l'unité de valeur de marge est % J'ai utilisé la marge en donnant des exemples de ses valeurs auparavant. sont tous en px, donc il n'y a aucun problème à comprendre cela. Mais que se passe-t-il si la valeur de la marge est en % ? En fait, le pourcentage (%) à ce moment est relatif à l'élément parent (conteneur) de l'élément, et cela est vrai à la fois pour les éléments frères et les éléments parent-enfant. (Merci encore à la suggestion fournie par le blogueur @小elvesPawn !! Sur la base de cette suggestion, cette partie du contenu est complétée) Cependant, lors de l'utilisation de marges verticales dans des éléments du même niveau, des résultats inattendus se produiront. un exemple. (1) Les éléments d'un même niveau utilisent une marge de % dans le sens horizontal Exemple 7 : <h2></h2> <h3></h3> 1 2 3<table border="0"> 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><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 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> </td> </table> Dans cet exemple, les deux éléments sont définis pour flotter vers la gauche afin que la marge horizontale des deux éléments puisse être facilement observée. Parmi eux, le p gauche n'a pas de marge, et la marge-gauche du p droit est de 20%. L'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-12.gif" alt="" style="max-width:90%" style="max-width:90%"> D'après le rendu , vous pouvez voir l'espacement entre les deux p. Il représente toujours 20 % de l'élément parent (l'élément parent de p à droite ici est le corps, et sa largeur est la largeur du navigateur). <h3> (2) Les éléments du même niveau utilisent une marge de % dans le sens vertical </h3> Basé sur l'inspiration de l'exemple 7, nous pouvons deviner que si la marge est utilisée dans le sens vertical et que l'unité de valeur est %, alors la distance finale entre les deux sera un pourcentage de l'élément parent (corps dans l'exemple ci-dessus). Alors est-ce vraiment le cas ? Voir l'exemple ci-dessous. Exemple 8 <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 </td> <td class="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 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> Ici, le p supérieur n'a pas de marge, et la marge supérieure du p inférieur est de 10. L'effet est le suivant : <img src="https://img.php.cn/upload/article/000/000/007/73737215d222f61d1e7c7f1447c45d1b-13.gif" alt="" style="max-width:90%" style="max-width:90%"> Nous avons constaté que lorsque je réduis la hauteur du navigateur, dans le direction verticale L'espacement n'a pas été réduit ! ! ! Et lorsque je réduis la largeur du navigateur, la distance verticale diminue ! ! ! Cela signifie : la marge est utilisée dans le sens vertical entre les éléments statistiques. Lorsque l'unité de valeur est %, elle est relative à la largeur de l'élément parent. Alors pourquoi la hauteur par rapport au navigateur n'est-elle pas celle que nous souhaitons ? Un maître sur Zhihu l'a expliqué ainsi (adresse originale : 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) Les éléments parent et enfant utilisent une marge d'une valeur de %</h3> Pour parent et éléments enfants, si Si l'unité utilisée dans les éléments enfants est %margin, alors la valeur de la marge est relative à la largeur et à la hauteur de l'élément parent (remarque : elle est bien relative à la hauteur de l'élément parent !). 　 Exemple 9 　Le code est le suivant : <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 </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">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">.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> Dans cet exemple, j'ai défini la valeur de marge gauche à 20 %, la valeur de marge supérieure à 20 %, la largeur de l'élément parent est de 500 px et la hauteur de l'élément parent . l'élément parent fait 300 px. Voyons l’effet ci-dessous. <img src="https://img.php.cn/upload/article/000/000/007/856d2f11c3d8af9a226d1a5f5414cef7-15.png" alt="" style="max-width:90%" style="max-width:90%"> Comme vous pouvez le voir sur l'image ci-dessus, la valeur de la marge supérieure de l'élément enfant est finalement relative à la largeur de l'élément parent plutôt qu'à la hauteur. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!