margin什么意思,margin代码什么意思?

简写属性在一个声明中设置所有外边距属性margin什么意思。

该属性可以有 1 到 4 个值。这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。注释:允许使用负值。可能的值 auto:浏览器计算外边距。length:规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。%:规定基于父元素的宽度的百分比的外边距。inherit:规定应该从父元素继承外边距。

一、首先,我们先设计一个div,并且给这个div添加一个id,id名随意取。然后设置一下宽高,并且添加一个红色的背景属性值。默认情况下,这个div是靠近浏览器的顶部和左边的。

margin什么意思,margin代码什么意思?

二、接着我们给这个div设置一下margin值,从左到右表示的是上边,右边,下边,左边的margin值。设置好之后,可以看到左边和上边都隔开了一定的距离,这就是margin值的用处,而下边和右边因为没有其他div或者其他颜色,所以效果被忽略了。当然,margin值也可以分开写,比如我只设置div的上边的margin值,就可以使用margin-top,而右边则可以使用margin-right,左边则是margin-left,下边则是margin-bottom。

三、设置margin-top之后,只有上边拉开了距离,而左边并没有拉开距离。接着我们再在网页中添加一个div,并设置id为“you”。接着设置“you”这个div的宽高和背景。

四、新添加一个div之后,如果没有设置margin-bottom的值,两个div就会连在一起。

然后我们给上面的div,也就是“my”,设置margin-bottom。设置好之后,两个div之间就会拉开距离,这样就可以定位好div的位置。

五、如果我们给“my”设置好margin-bottom之后,又给“you”设置margin-top,又会有什么结果呢?结果就是这样:有两个相邻的div,如果一个div设置了margin-top,另一个设置了margin-bottom,则以它们之间值最大的为准。

六、比如margin-top是50像素,margin-bottom是30像素,则间隔就是50像素,而不是两个相加哦。了解这个之后,在网页布局中,我们只需要对其中一个设置就可以了。

版权声明:本站部分文章来源互联网,主要目的在于分享信息,版权归原作者所有,本站不拥有所有权,不承担相关法律责任,如有侵权请联系我们,本站将立刻删除。
(0)
上一篇 2022年5月29日 上午9:27
下一篇 2022年5月29日 上午9:28

相关推荐