css外边距是什么?css外边距属性的介绍
程序员文章站
2022-04-16 13:14:06
...
在学习css的时候,会css外边距这一概念,所以,css外边距是什么呢?边框以外就是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素,接下来本篇文章将来给大家介绍关于css外边距属性的相关内容。
首先我们应该知道css的外边距属性是margin。
margin清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。
margin可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
我们来通过一张图看看css外边距属性值对应的是什么:
css外边距margin属性值最多为四个:分别表示上外边距、右外边距、下外边距、左外边距。也可以是三个:表示上外边距、左右外边距、下外边距。也可以是两个:表示上下外边距、左右外边距。最少为一个:表示四边外边距。
css外边距属性值可以是auto,浏览器自动计算外边距,块级元素会水平居中显示;属性值可以是百分比,百分比是基于父元素的宽度计算的;属性值可以是CSS长度单位,值可以是负值。属性值可以是inherit。
接着我们就来直接看css外边距的实现代码
注意:css外边距margin属性的默认值是0,所以如果没有为margin声明一个值,就不会出现外边距。
css外边距实现代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p{ background-color:yellow; } p.margin{ margin:2cm 4cm 3cm 4cm; } </style> </head> <body> <p>没有指定外边距大小</p> <p class="margin">有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距</p> </body> </html>
css外边距实现效果如下:
最后:
以上就是本篇文章的全部内容了,如果对css外边距属性margin想要更进一步的了解,可以参考css学习手册。
以上就是css外边距是什么?css外边距属性的介绍的详细内容,更多请关注其它相关文章!
上一篇: JavaScript趣题:构建URI
推荐阅读
-
css盒模型。边框和内外边距
-
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
-
CSS 外边距(margin)重叠及防止方法
-
关于css中margin的值和垂直外边距重叠问题
-
CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
-
【代码笔记】Web-CSS-CSS Margin(外边距)
-
CSS2系列:外边距合并问题(margincollapse)_html/css_WEB-ITnose
-
margin外边距负值的作用_html/css_WEB-ITnose
-
外边距塌陷之clearance_html/css_WEB-ITnose
-
css样式之边框和内外边距_html/css_WEB-ITnose