《思考+总结》css遇到的问题一：（p元素）子盒子添加margin时导致（div）父盒子一起下移，与理想布局出现偏差。

最新推荐文章于 2023-08-07 14:34:21 发布

CELLS_sssss

最新推荐文章于 2023-08-07 14:34:21 发布

阅读量852

点赞数 1

分类专栏：前端JS 前端H5 文章标签： css3 css

本文链接：https://blog.csdn.net/qq_36417530/article/details/113947961

版权

博客讲述了在CSS布局中，子元素`p`的上外边距导致父元素整体下移的问题。作者通过分析发现，当子元素上边距大于父元素时，实际上相当于给父元素添加了上边距。通过添加`overflow: hidden`、`padding`或`border`到父元素可以解决这个问题，推荐使用`overflow: hidden`。同时提醒注意`p`标签的默认上下边距可能影响布局。

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

出现的问题

在学习多个盒子之间的外边距影响时，了解到水平排放的盒子，水平间距时margin的累加；而垂直排放的盒子，垂直间距是合并的（取最大值）。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子</title>
		<link rel="stylesheet" type="text/css" href="hezi.css" />
	</head>
	<body>
		<div id="divid">
			<p class=