CSS中div的外边距margin

最新推荐文章于 2025-07-13 15:33:15 发布
原创 最新推荐文章于 2025-07-13 15:33:15 发布 · 8.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文通过两个实例详细介绍了CSS中div元素的外边距margin属性的使用方法，包括简单的左右外边距设置以及复杂的四边不同外边距设置。

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

---------------------------------------------CSS中div的外边距margin-----------------------------------------

 

代码示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

span{

    font-size:12px;

    font-family: Arail;

    padding:10px;

    background-color:#fffcd3;

    border:1px solid black;

}

.left{

    background-color:#a9d6ff;

    margin-right:30px;

}

.right{

    margin-left:30px;

}

</style>

</head>

<body>

<span class="left">元素1</span>

<span class="right">元素2</span>

</body>

</html>

 

---------------------------------------------------

-----------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

div{

    font-size:12px;

    font-family: Arail;

    padding:10px;

    background-color:#fffcd3;

    border:1px solid black;

    width:50%;

}

.inside{

    background-color:#a9d6ff;

    margin:10px 30px 50px 100px;/* 设置div的外边距，顺时针由上开始赋值  */

}

 

</style>

</head>

<body>

<div class="outside">

    <div class="inside">内部div</div>

</div>

</body>

</html>

 

----------------------------------------------------

 

教你玩转CSS margin(外边距)
孙叫兽的博客
07-21 790
目录 margin 可能的值 Margin - 单边外边距属性 Margin - 简写属性 所有的CSS边距属性 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 可能的值 值 | 说明 –|— auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 length | 定义一个固定的margin（使用像素，pt，em等） % | 定义一个使用百.
div样式之margin
weixin_45637488的博客
04-03 2258
<!-- 外边距(margin):盒子之间的距离--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
css中的margin属性
最新发布
qq_43180790的博客
07-13 77
当两个块级元素在垂直方向上相邻时，它们的外边距会合并为一个外边距。写页面的时候，两个上下的div之间设置的margin会重叠。
垂直外边距合并
zch3514563778的博客
12-14 261
##垂直外边距的重叠 垂直外边距的重叠可能发生在（兄弟或父子之间） 首先是垂直外边距的重叠 当垂直的外边距相邻时，给两个外边距设置一个下外边距和设置一个上外边距，他们会将两个外边距合并成一个外边距，这就是外边距的重叠（两个外边距取最大的那个外边距） 父子之间的外边距重叠，当一个父元素中有一个子元素，并且父元素的内容区也就是子元素上面没有内容或者没有设置内边距和设置一个边框把他们之间的外边距隔开，这时我们给子元素设置一个外边距，子元素的外边距就会传递给父元素 ...
CSS排版DIV的“margin”属性常见布局技巧垂直居中对齐，左上角，左下角，右下角，右上角对齐方式的实现
飙歌的博客
10-24 1万+
margin的值类型有：auto | length | percentage percentage：百分比是由被应用box的containing block margin的默认值为0，并且margin支持负值。 margin可以用来同时指定box的四边外边距。如果属性margin有四个值，那么值将按照上-右-下-左的顺序作用于四边，按顺时针的顺序围绕元素。 表达式如下： margin：top right bottom left； 四个数值中间以空格分隔。效果等同于： margin...
设置div边距
热门推荐
zhaoguozhun411的博客
02-12 1万+
设置边距 设置外边距： margin-top: 20px; /*margin-right: 30px; margin-bottom: 40px; margin-left: 30px;*/ /*margin:20px;只有一个值，同时设置四个方向的值*/ /*margin:0 20px;两个值，第一个值是上下（x轴）,第二个值是左右（y轴）*/ /*margin:20px 30p
详解css外边距折叠（margin collapsing）
12-30
第1种外边距折叠：兄弟元素 文本上下间距10px 文本上下间距10px </div> 看这个例子中的两个p标签，根据样式定义：第一个p的margin-bottom和第二个p的margin-top 都是10px，那实际距离应该等于20p
CSS块元素嵌套塌陷问题（div嵌套margin无法改变内div外边距）
m0_70285310的博客
04-03 280
嵌套两个块元素时，内元素设定margin后不起作用，如：代码：效果如图：按理代码来说蓝色块应该往下50像素，但实际并没有效果原因是：嵌套使得产生了塌陷效果，外边距会按照margin值大的那个整体一起下降。上图就是父子块一起下降了100像素，如果box2的margin值大于box1的那就会执行box2的，读者可自行试一试。
在html中通过使用css解决外边距重叠（外边距塌陷）问题
小杨的博客
07-18 2191
【什么是外边距重叠，重叠的结果是什么？ 】 1.什么是外边距重叠？ 外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高...给大家分享一下什么是外边距重叠？重叠的结果是什么？1.背景介绍外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。2.知识...给大家分享一下什么是外边距重叠？重叠的结果是什么？1.背景介绍外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。2.知识...给大家分享一下什么是外边距
浅谈css margin重叠
12-13
父子元素margin重叠 ...以上这篇浅谈css margin重叠就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。 原文地址：http://www.cnblogs.com/lj1028/p/5683253.html
通过css属性margin:auto让Div中的Table居中
01-19
有时候在Div中加上 <div xss=removed></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如： 复制代码代码如下: <div xss=removed> ”1″ cellpadding=”3″ cellspacing=”0″ xss=removed> <tr>...
CSS基础笔记六，DIV盒子模型（content内容，内边距paddins，边框border，外边距margin）
qq_55006020的博客
06-28 3167
盒子模型分为四个区域内容，可以往里面安放的元素内边距padding（可以用像素填充，也可以用百分比，还可以指定上下左右的不同的款式），简写模式，1个值的情况下 就是上下左右 四个值是上右下左边框border边框的样式 有实线（solid），虚线（dashed），双实线（double），点线（dotted）border-width 指定边框的宽度边框可以设置圆角（border-rddius） 用百分比或者像素边框的不同方位 border-left/top/rigth/bottom。
CSS|内外边距
Alan_Lowe
07-31 1036
CSS|内外边距 设置外边距和内边距： 外边距： margin-top 上 margin-right 右 margin-bottom 下 margin-left 左 内边距： padding-top 上 padding-right 右 padding-bottom 下 padding-left 左 也可以使用margin或者padding，它们可以有2，3或4个参数： margin:上边距，右边距，下边距，左边距（顺时针） margin：上边距，左右边距，下边距 margin：上下边距，左右边距
css内外边距
weixin_43457011的博客
11-09 236
1.子元素设置margin-top无效果,并导致父元素塌陷 想要实现如上图这样的效果,结果变成了下图的效果 解决方法: 1.在父元素上添加 border: 1px solid red; 2. 在父元素上添加padding: 1px; 3. 在父元素上添加overflow: hidden; **2.计算盒子尺寸因padding-left产生的问题 ** 本来盒子的宽度为200px,但因为文字要向左移动一段距离,所以加上padding-left后导致盒子的宽度变了,本来预算的宽度就不够了. 解决方法:
CSS内外边距和div居中
weixin_47556601的博客
02-05 1252
大家好，我们来分享CSS内外边距和div居中 看源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 外边距 :使元素居中*/ #box{ width: 300px; border: 1
div margin理解
weixin_34163553的博客
11-30 159
2019独角兽企业重金招聘Python工程师标准>>> ...
css- margin详解
deqg33573的博客
03-23 342
margin的特性 margin始终是透明的，所以设置 margin 来用来控制元素空间的间隔。 提供了缺省数值的缩写（这里就不介绍了），所以在实战中我一般都采用此种写法，一来方便修改，二来节省字符。 垂直外边据合并：当两个盒子垂直外边距相遇时，只有数值大的那个外边据的值才是起作用的（这跟padding有明显的区别，如果垂直方向设置了padding且相遇，则两个盒子之间的空白等...
css设置div的外边距
06-11
在 CSS 中，可以使用 `margin` 属性来设置一个元素的外边距。`margin` 属性可以设置一个或多个值，用空格分隔，分别对应元素的上、右、下、左四个方向的外边距。 以下是设置元素上下左右外边距为 10px 的示例代码：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值