无上边框出现的问题

最新推荐文章于 2022-09-22 21:12:07 发布

from_the_star

最新推荐文章于 2022-09-22 21:12:07 发布

阅读量533

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： boeder css

本文链接：https://blog.youkuaiyun.com/from_the_star/article/details/50896906

web前端专栏收录该内容

27 篇文章

订阅专栏

本文探讨了CSS中内嵌div的margin-top属性如何影响外部div的边框显示及间距。通过实例说明当顶部边框移除时，内嵌元素的上边距是如何影响整体布局的。

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

今天学习css出现一个问题记录一下

下面div无边框是这样，原本上方有边框连在一起

下面div

内嵌div

这是因为内嵌的div有margin-top，当上边框没有时，这外边距应用到与标题div的间距

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>边框问题</title>
</head>
<body>
	<div style="width:200px;height:50px;border:solid red 2px;">
		标题：
	</div>
	<div style="width:200px;height:50px;border:solid red 2px;border-top:none;">
		<div style="height:30px；width:100px;border:solid blue 1px;margin:5px">
			下面div嵌套的div
		</div>
	</div>
</body>
</html>

（刚开始自学的，不对的地方望指正！！！）