CSS margin用法详解_html/css_WEB-ITnose
程序员文章站
2024-01-03 19:24:52
...
CSS的margin用法详解:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
margin属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法。
此属性用来定义对象的外边距的,也称之为外补白,所谓的外边距就是围绕边框外侧的空白区域。可以单独定义上下左右某一方位的外边距。代码实例如下:
实例一:
子div没有外边距的情况:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
margin属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法。
此属性用来定义对象的外边距的,也称之为外补白,所谓的外边距就是围绕边框外侧的空白区域。可以单独定义上下左右某一方位的外边距。代码实例如下:
实例一:
子div没有外边距的情况:
蚂蚁部落
实例二:
设置了左边距以后子div:
蚂蚁部落
以上代码设置了子div的左外边距,这样就是比较清晰的明白外边距的意思了。
当然我们可以通过margin-right、margin-top和margin-bottom设置各自方位的外边距。虽然通过各自方位的外边属性设置外边距比较明确,但是也略显冗余,所以可以使用margin属性一次性设置多个方位的外边距。代码实例如下:
蚂蚁部落
以上代码中通过使用margin属性一次性设置了对象的四个外边距。
下面是margin属性值的作用特点:
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上、下,第二个用于左、右。
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4657
更多内容可以参阅:http://www.softwhy.com/divcss/
推荐阅读
-
CSS margin用法详解_html/css_WEB-ITnose
-
加载音频Audio_html/css_WEB-ITnose
-
-moz- -webkit- -ms- 为神马要写全_html/css_WEB-ITnose
-
酷站欣赏:12个漂亮的国外单页网站设计案例_html/css_WEB-ITnose
-
HTML结构化:DIV+CSS_html/css_WEB-ITnose
-
Design and prototype UI, interaction and animation in Interface Builder_html/css_WEB-ITnose
-
调用外部定义的CSS文件_html/css_WEB-ITnose
-
CSS全屏布局的5种方式_html/css_WEB-ITnose
-
应该怎样进一步学习写样式_html/css_WEB-ITnose
-
安利一篇自己大学以来的反思,希望看到此文的朋友们能有些感触_html/css_WEB-ITnose