为什么设置的margin-top属性不管用_html/css

Maison

interface Web

tutoriel HTML

为什么设置的margin-top属性不管用_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:36 AM

为什么设置的margin-top属性不管用:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
有时候大家可能会遇到奇怪的现象，尽管没有任何的语法错误，但是设置的margin-top属性不会起作用，下面就就结合代码实例介绍一下产生此现象的原因和解决方法。
原因一:
外边距合并margin-top属性失效。代码实例如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.first{  width:100px;  height:100px;  background-color:red;  margin-bottom:60px;}.second{  width:100px;  height:100px;  background-color:green;  margin-top:40px;}</style></head><body><div class="first"></div><div class="second"></div></body></html>

从以上代码的运行可以看出，第二个div设置的margin-top并没有生效，起作用的是第一个div的设置的margin-bottom，这里有个规律，那就是合并后的外边距的高度等于外边距的高度中的较大的一个，所以遇到此种情况可以格外注意外边距大小的设置。
原因二:
子元素和父元素也可能会导致设置的子元素上外边距失效情况，代码实例如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.father{  width:300px;  height:300px;  background-color:red;  margin-top:20px;}.children{  width:100px;  height:100px;  background-color:blue;  margin-top:10px;}</style></head><body><div class="father">  <div class="children"></div></div></body></html>

解决方法:
为父对象在相应的外边距方向上有边框(border)和内边距(padding)，或者为overflow属性值设置为hidden即可避免。
IE6浏览器下不会出现外边距合并现象。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4638

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Pourquoi les balises HTML sont-elles importantes pour le développement Web?May 02, 2025 am 12:03 AM

HtmltagsaressentialforwebDevelopmentaSheystructureAnDenHanceWebpages.1) TheyDefiLlayout, Semantics et Interactivité.2) SemanctagSimproveaccessibilistibilitySeo.3) correct usUsoftagscanoptimizeperformanceAndensurecross-browercompatibilité.

Expliquez l'importance d'utiliser un style de codage cohérent pour les balises et attributs HTML.May 01, 2025 am 12:01 AM

Un style de codage HTML cohérent est important car il améliore la lisibilité, la maintenabilité et l'efficacité du code. 1) Utilisez des étiquettes et des attributs en minuscules, 2) Gardez une indentation cohérente, 3) Sélectionnez et respectez les citations simples ou doubles, 4) Évitez de mélanger différents styles dans les projets, 5) Utilisez des outils d'automatisation tels que plus jolis ou Eslint pour assurer la cohérence en style.

Comment implémenter un carrousel multi-projets dans Bootstrap 4?Apr 30, 2025 pm 03:24 PM

La solution pour implémenter un carrousel multi-projets dans Bootstrap4 implémentation de carrousel multi-projets dans bootstrap4 n'est pas une tâche facile. Bien que bootstrap ...

Comment le site officiel Deepseek réalise-t-il l'effet de l'événement de défilement de souris pénétrant?Apr 30, 2025 pm 03:21 PM

Comment réaliser l'effet de la pénétration des événements de défilement de la souris? Lorsque nous naviguons sur le Web, nous rencontrons souvent des conceptions d'interaction spéciales. Par exemple, sur le site officiel Deepseek, � ...

Comment modifier le style de contrôle de la lecture de la vidéo HTMLApr 30, 2025 pm 03:18 PM

Le style de contrôle de lecture par défaut de la vidéo HTML ne peut pas être modifié directement via CSS. 1. Créez des contrôles personnalisés à l'aide de JavaScript. 2. Embellir ces contrôles via CSS. 3. Considérons la compatibilité, l'expérience utilisateur et les performances, en utilisant des bibliothèques telles que Video.js ou Plyr peuvent simplifier le processus.

Quels problèmes seront causés par l'utilisation de la sélection native sur votre téléphone?Apr 30, 2025 pm 03:15 PM

Problèmes potentiels avec l'utilisation de la sélection native sur les téléphones mobiles Lors du développement d'applications mobiles, nous rencontrons souvent la nécessité de sélectionner des boîtes. Normalement, les développeurs ...

Quels sont les inconvénients de l'utilisation de Native Select sur votre téléphone?Apr 30, 2025 pm 03:12 PM

Quels sont les inconvénients de l'utilisation de Native Select sur votre téléphone? Lors du développement d'applications sur des appareils mobiles, il est très important de choisir les bons composants d'interface utilisateur. De nombreux développeurs ...

Comment optimiser la gestion des collisions de l'itinérance à la troisième personne dans une pièce en utilisant trois.js et Octree?Apr 30, 2025 pm 03:09 PM

Utilisez Three.js et Octree pour optimiser la gestion des collisions de l'itinérance à la troisième personne dans la salle. Utilisez Octree dans Three.js pour mettre en œuvre l'itinérance à la troisième personne dans la salle et ajouter des collisions ...

See all articles