CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间。


Margin

margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的

margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。

可能的值

说明
auto 设置浏览器边距。
这样做的结果会依赖于浏览器
length 定义一个固定的margin(使用像素,pt,em等)
% 定义一个使用百分比的边距

 Margin可以使用负值,重叠的内容。



在CSS中,它可以指定不同的侧面不同的边距:

实例

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

尝试一下 »


Margin - 简写属性

<p为了缩短代码,有可能使用一个属性中margin指定的所有边距属性。这就是所谓的缩写属性。< p="">

所有边距属性的缩写属性是"margin":

实例

margin:100px 50px;

尝试一下 »

margin属性可以有一到四个值。/p>

  • margin:25px 50px 75px 100px;

    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;
    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;
    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;
    • 所有的4个边距都是25px


更多实例

文本的上边距设置使用厘米值
这个例子演示了如何设置一个使用厘米值的文本的顶部margin。

Set 使用百分比值设置文本的下边距
这个例子演示了如何设置使用百分比值的下边距,相对于包含的元素的宽度。


所有的CSS边距属性

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
时间: 2024-12-17 10:37:57

CSS Margin(外边距)的相关文章

绝对定位对margin外边距的影响

绝对定位对margin外边距的影响:关于什么是绝对定位和外边距这里就不多介绍了,具体可以参阅以下两篇文章.(1).绝对定位可以参阅CSS的绝对定位一章节.(2).外边距可以参阅CSS的外边距一章节.下面就通过代码实例介绍一下绝对定位对于margin外边距的影响.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&qu

margin外边距合并详解

margin外边距合并详解: 外边距合并现象在网页布局中非常的常见,必须对此有明确的把我,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面再通过实例结合对网络教材的总结,再来介绍一下外边距合并现象. 概念: 相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并. 水平方向不存在此现象. 外边距合并产生条件: 1.相邻的外边距之间没有非空内容.padding和border和clear分隔. 2.对象都处于文档流中,即非浮动和

margin外边距负值的作用

margin外边距负值的作用:在很多CSS代码中,都可以看到margin外边距有使用负值的情况,下面就介绍一下他的作用.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: CSS 外边距合并实例 1 亲自试一试

css中外边距

1.内部元素设置margin等,父元素高度不能适应 1 .classA { 2 height: 200px; 3 background-color: cornflowerblue; 4 overflow: hidden; /*解决高度不能适应*/ 5 } 6 .classB { 7 width: 1000px; 8 height: 100px; 9 background-color: red; 10 margin: 0 auto; 11 margin-top: 50px; 12 } 13 14

padding(内边距)、margin(外边距)、border(边框)

元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 margin 设置为负值,元素将会变大.

css 内外边距

一.边距 内边距: 边框于内容之间的距离. 外边距:边框于边框之间的距离. 二.外边距margin Margin的特性 margin始终是透明的. margin通过使用单独的属性,可以对上.右.下.左的外边距进行设置.即:margin-top.margin-right.margin-bottom.margin-left. 外边距的 margin-width 的值类型有:auto | length | percentage 也可以使用简写的外边距属性同时改变所有的外边距:margin: top r

margin外边距属性

外边距属性: 设置元素与元素之间的距离(外边距),4个方向(上右下左). margin:长度值|百分比|auto margin-top margin-right margin-bottom margin-left 说明:值可为负值. 默认情况下,相应HTML块级元素存在外边距 body.h1~h6.p...... 声明margin属性,覆盖默认样式: body,h1,h2,h3,h4,h5,h6,p{ margin:0; } margin值为auto,实现水平方向居中显示效果. 由浏览器计算外边

CSS中外边距重叠的问题

相邻的两个或多个外边距会合并成一个外边距,当同为正的,取最大的外边距,当有正负时,取最小的外边距加上最大的外边距,这里的相邻指的是外边距的相邻: <div style="width:100px;height:100px;background-color:red;margin-bottom:20px;border:1px solid red"></div> <div style="width:100px;height:100px;backgroun