margin叠加相邻两个元素的上下margin是叠加在一起

最新推荐文章于 2022-08-05 16:40:26 发布

转载最新推荐文章于 2022-08-05 16:40:26 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hduhdc/p/5225522.html

本文详细解析了CSS中关于外边距(margin)的使用方法及其特性，包括margin的基本用法、不同方向上的设置方式及特殊情况下的表现，如margin叠加效果等。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box{width:200px;height:200px;background:Red;border:10px solid #000; margin:30px 100px 100px}
#div{width:200px;height:200px;background:blue;border:10px solid #ccc; margin:40px;}
/*
margin 外边距(margin元素的边框之外不显示元素背景)
margin:10px 20px;上左
margin:10px 20px 40px;上左下
margin:10px 20px 40px 60px;上右下左
margin-top
margin-right
margin-bottom
margin-left

margin叠加相邻两个元素的上下margin是叠加在一起
*/
</style>
</head>
<body>
<div id="box"></div>
<div id="div"></div>
</body>
</html>