Maison > Article > interface Web > Comment résoudre le problème d'effondrement de la marge supérieure en HTML5 (code ci-joint)

Comment résoudre le problème d'effondrement de la marge supérieure en HTML5 (code ci-joint)

不言original: 2018-08-09 15:46:393553parcourir

Cet article vous présente comment HTML5 résout le problème de l'effondrement de la marge supérieure (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
/* 解决margin-top塌陷问题 */
/* 1.设置border padding */
/* border: 1px solid green; */
/* padding: 1px; */
/* 2.设置overflow */
overflow: hidden;
}
/* 3.通过伪类
实际开发使用
*/
.clearfix:before{
content: "";
display: table;
}
.box1{
width: 100px;
height: 100px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<p class="box clearfix">
<p class="box1"></p>
</p>
</body>
</html>

L'effet de l'opération est le suivant :

Comment résoudre le problème deffondrement de la marge supérieure en HTML5 (code ci-joint)

Recommandations associées :

Utilisation de la balise vidéo en Html5 : Comment remplir automatiquement la balise div parent

Attribut HTML5 : Exemple d'utilisation de l'attribut margin

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!

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 précédent：Utilisation de la balise vidéo en HTML5 : comment remplir automatiquement la balise div parentArticle suivant：Utilisation de la balise vidéo en HTML5 : comment remplir automatiquement la balise div parent

Articles Liés

Voir plus