由margin引起的盒子塌陷问题

最新推荐文章于 2024-06-25 18:53:17 发布

二十一块石头

最新推荐文章于 2024-06-25 18:53:17 发布

阅读量235

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_44872688/article/details/120809110

版权

本文探讨了CSS中的盒子塌陷问题，当两个盒子并排放置时，由于float属性导致的上边距不一致，产生视觉上的盒子塌陷现象。文章详细分析了问题原因，并提出两种解决方案：取消盒子的上边距或使用父盒子来设定边距。

摘要由CSDN通过智能技术生成

文章目录

一、什么是盒子塌陷问题
二、盒子塌陷问题的原因
三、盒子塌陷问题的解决方法

一、什么是盒子塌陷问题

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
 <style>
.a1,.a2 {
   
    margin-top: 5px;
}
.a1 {
   
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.a2 {
   
    width: 200
    height: 200px;
    background-color: yellow