margin(CSS语法)

更新时间:2025-05-20 00:55:04 阅读: 评论:0

margin(CSS语法)

margin,是CSS语法,这个简写属性用于在一个声明中设定所有当前或者指定元素所有外边距的宽度,或者设定各边上外边距的宽度。

基本介绍

中文名:外边距  外文名:margin 程式语言:CSS

定义

margin 简写属性在一个声明中设定所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。margin 属性接受任何长度单位、百分数值甚至负值。margin 属性可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。

简洁写法

margin跟padding一样,也有简洁写法。我们可以使用margin属性来设定四个方向的外边距。在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。margin写法有3种,分别如下:

 margin:像素值;    margin:像素值1 像素值2;     margin:像素值1 像素值2 像素值3 像素值4;

例如:“margin:20px;”表示四个方向的外边距都是20px;“margin:20px 40px;”表示margin-top和margin-bottom为20px,margin-right和margin-left为40px。“margin:20px 40px 60px 80px;”表示margin-top为20px,margin-right为40px,margin-bottom为60px,margin-left为80px。大家按照顺时针方向记忆就可以了。

语法说明

这个简写属性设定一个元素所有外边距的宽度,或者设定各边上外边距的宽度。块级元素的垂直相邻外边距会合併,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合併。同样地,浮动元素的外边距也不会合併。允许指定负的外边距值,不过使用时要小心。

边距属性

属性 描述 margin 简写属性。在一个声明中设定所有外边距属性。 margin-bottom 设定元素的下外边距。 margin-left 设定元素的左外边距。 margin-right 设定元素的右外边距。 margin-top 设定元素的上外边距。

语法结构

margin:5px auto;意思上下为5,左右平均居中margin-top: 20px; 上外边距margin-right: 30px; 右外边距margin-bottom: 30px;下外边距margin-left: 20px; 左外边距margin:1px 四边统一边距margin:1px 1px 上下边距,左右边距margin:1px 1px 1px 上,左右,下边距margin:1px 1px 1px 1px 上,右,下,左边距注释:允许使用负值。

语法举例

例子 1margin:10px 5px 15px 20px;上外边距是 10px右外边距是 5px下外边距是 15px左外边距是 20px例子 2margin:10px 5px 15px;上外边距是 10px右外边距和左外边距是 5px下外边距是 15px例子 3margin:10px 5px;上外边距和下外边距是 10px右外边距和左外边距是 5px例子 4margin:10px;所有 4 个外边距都是 10px

默认值: 0 继承性: no 版本: CSS1 JavaScript 语法: object.style.margin="10px 5px"

实例

设定 p 元素的 4 个外边距:p { margin:2cm 4cm 3cm 4cm; }

浏览器支持

所有浏览器都支持 margin 属性。注释:任何的版本的 Internet Explorer(包括 IE8)都不支持属性值 "inherit"。

可能的值

值 描述 auto 浏览器计算外边距。 length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 % 规定基于父元素的宽度的百分比的外边距。 inherit 规定应该从父元素继承外边距。

内外距离区别

这是很多学html 人的困扰其实说白了padding就是内容与框线的空隙.而margin 则是模组与模组的空隙.下面图解:

margin 与 padding 得盒子模型图解

实例

本例演示如何将所有的边距属性设定于一个声明中。

<html><head><style type="text/css">p.margin{margin:50px100px75px100px}</style></head><body><p>这个段落没有指定外边距。</p><p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p><p>这个段落没有指定外边距。</p></body></html>

本文发布于:2023-03-25 10:14:32,感谢您对本站的认可!

本文链接:http://www.ranqi119.com/to/1679805949227183.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:语法   margin   CSS
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 站长QQ:55-9-10-26|友情:优美诗词|电脑我帮您|扬州装修|369文学|学编程|软件玩家|水木编程|编程频道