CSS margin 属性

作者 : 开心源码 本文共995个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共70人阅读

CSS margin 属性

设置外边距的最简单的方法就是用 margin 属性。margin使用于设置对象标签之间距离间隔,比方2个上下排列的DIV盒子,我们即可以用margin样式实现上下2个盒子间距。margin 属性接受任何长度单位,能是像素、英寸、毫米或者 em。margin 能设置为 auto。更常见的做法是为外边距设置长度值。下面的公告在 h1 元素的各个边上设置了1/4 英寸宽的空白:h1 {margin : 0.25in;},下面为 h1 元素的四个边分别定义了不同的外边距,所用的长度单位是像素 (px):

h1 {margin : 10px 0px 15px 5px;}

与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的,另外,还能为 margin 设置一个百分比数值:p {margin : 10%;},这样p 元素的外边距是其父元素的 width 的 10%。margin 的默认值是 0,所以假如没有为 margin 公告一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预约的样式,外边距也不例外。利使用margin实现布局居中,基础使用法:marign:0 auto;就可实现对象居中,但需要一个条件,那就是该对象上级肯定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式。

CSS margin 属性

上图:CSS margin属性

CSS 单边外边距属性

你能用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px,能采使用以下方法:

p {margin-left: 20px;}

您能用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其余外边距:margin-top、margin-right、margin-bottom、margin-left

一个规则中能用多个这种单边属性,例如:

h2 {

margin-top: 20px;

margin-right: 30px;

margin-bottom: 30px;

margin-left: 20px;

}

你也能写为:p {margin: 20px 30px 30px 20px;},简写的逻辑仍为:上、右、下、左。

CSS margin 属性

上图:CSS 单边外边距属性

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS margin 属性

发表回复