div中的p元素看起来不在div中的原因

最新推荐文章于 2025-05-26 16:12:05 发布

转载最新推荐文章于 2025-05-26 16:12:05 发布 · 3.4k 阅读

文章标签：

#html #css

前端专栏收录该内容

10 篇文章

订阅专栏

本文探讨了HTML中p元素看似溢出div容器的误解，解析了CSS样式设置对元素显示的影响，并提供了清晰的解决方案，包括正确使用定位属性和调整边框与背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

童鞋们，有没有在写html时发现明明p元素就在div中，可显示的时候却在div外面？如下图1：

html代码部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		background-color: silver;
	}
	
	#div{
		height: 100px;
		width: 200px;
		background-color: green;
		text-align: center;
		margin: -50px 0 0 -100px;
		position: absolute;
		left: 50%;
		top: 50%;
	}
</style>
</head>
<body>
	<div id="div">
		<p id="p1">我是P1</p>
		<p id="p2">我是P2</p>
	</div>
</body>
</html>

仔细查看代码，好像编写没有问题；其实编写确实没有问题，只是我们设置了

*{
	margin: 0;
	padding: 0;
	background-color: silver;
 }

*代表所有，就是指p也是按照所有元素的背景色设置，看起来在div之外，其实是在div里面的。不信你可以在div的CSS样式中加上border属性。在#div中添加样式：

border: 2px solid blue;

显示如图2

不过看起来很别扭，可以不要设置所有元素(即*)的背景色，或者设置所有元素的边框也行。

如下：

看起来是不是清楚很多。

我还有两个发现：

发现一：如果不要position: absolute;属性，那么left和top定位会失效。那么position属性就是为了指定本元素定位的参照。是绝对定位呢，还是相对定位呢，还是静态呢等。但，它们都是指定本元素的定位参照。

发现二：如果想要某个元素定位处于最中间，可以使用如下CSS代码

{
    width: 200px;
    height: 100px;
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -100px;
    margin-top: -50px;
}

参考：使一个div在body中水平垂直居中的方法

div里面的<p>标记为什么会跑到div的外面