web前端基础学习笔记（16）之解决margin-top 塌陷的六种方法

最新推荐文章于 2024-05-11 08:42:16 发布

站起一棵树

最新推荐文章于 2024-05-11 08:42:16 发布

阅读量454

点赞数 1

分类专栏： Web前端

原文链接：https://blog.csdn.net/irouduoduo/article/details/72968259

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一个父盒子嵌套一个子盒子，子盒子margin-top带来的塌陷问题。

1.给父盒子添加border

2.给父盒子添加padding-top

3.给父盒子添加overflow:hidden

4.父盒子:position:fixed

5.父盒子:display:table

6.给子元素的前面添加一个兄弟元素

   属性为:content:"";
              overflow:hidden;

例如，以下例子为 margin 塌陷

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
       .parent {
       	width: 400px;
       	height: 400px;
       	background-color: red;
       	margin: 0 auto;
       }
       .son {
       	width: 200px;
       	height: 200px;
       	background-color: green;
       	margin: 0 auto;
       	margin-top: 100px;
       }
	</style>
</head>
<body>
	<div class="parent">
		<div class="son"></div>
	</div>
</body>
</html>

增加 son 盒子的margin- top 值，父盒子会与子盒子一起往下
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

站起一棵树

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端基础学习笔记（16）之解决margin-top 塌陷的六种方法

一个父盒子嵌套一个子盒子，子盒子margin-top带来的塌陷问题。1.给父盒子添加border2.给父盒子添加padding-top3.给父盒子添加overflow:hidden4.父盒子:position:fixed5.父盒子:display:table6.给子元素的前面添加一个兄弟元素属性为:content:""; overflow:hidden;例如，以下例子为 margin 塌陷<!DOCTYPE html><html la
复制链接

扫一扫