CSS margin特性详细介绍与用法(附margin解剖学图)

日期:2021-03-10 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

margin 特性是css用于在1个申明中设定全部 margin 特性的简写特性,margin是css操纵块级元素之间的间距, 它们之间是全透明不能见的。

margin特性包括了margin left :距元素块间距(设定距左内边距) ;margin top:距头顶(上)元素块间距(设定距顶部元素块间距);margin right :距右元素块间距(设定距右元素块距) ;margin bottom元素块间距(设定距低(下)元素块距)。其2维搭建图可见CSS特性2维图。


margin的解剖学图


margin left用法:margin-left:10px;  这个意思间距左元素块距10像素,可跟百分例如(margin-left:10%;   间距左元素块10%的间距);
margin right用法:margin-right:10px; 这个意思间距边元素块距10像素,可跟百分例如(margin-right:10%; 间距边元素块10%的间距);
margin top用法:margin-top:10px; 这个意思间距边元素块距10像素,可跟百分例如(margin-top:10%; 间距边元素块10%的间距);
margin bottom用法:margin-bottom:10px; 这个意思间距边元素块距10像素,可跟百分例如(margin-bottom:10%; 间距边元素块10%的间距);
留意margin正中间的连接“ - ”号,设定间距值时用“  ”并授予值,并以“  ”完毕,而且所有用小写半角字母

假如是上下左右都必须设定margin的值时能够简写来完成,以提升css 。
如简写方法有:
margin:10px; 意思便是左右上下元素块间距便是10px(10像素)等于margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 1样实际效果简写;
margin:5px 10px; 意思左右元素块间距为5px,上下的元素块间距为10px,等于margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 1样实际效果简写;
margin:5px 6px 7px; 意思上元素块间距5px,下元素块间距为7PX,上下元素块间距为6px,等于margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 1样实际效果简写;
margin:5px 6px 7px 8px;  意思上元素块为5px,右元素块间距为6px ,下元素块间距为7px,左元素块间距8px,等于等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 1样实际效果简写;

在其中margin:5px 6px 7px 8px; 的转法为顺时针即图:


margin的特性转法图解


上面就是div css网站总结的margin的特性与用法。在其中margin的用与padding同样。