微思考源码weisico.com|分享互联网优质资源,免费织梦模板,WP主题下载

CSS margin属性与用法教程

定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。

margin padding 盒子模型图解

margin.jpg

margin的边距转法为顺时针,即上、右、下、左

例子 1

margin:10px 5px 15px 20px
  • 上外边距是 10px

  • 右外边距是 5px

  • 下外边距是 15px

  • 左外边距是 20px

例子 2

margin:10px 5px 15px;
  • 上外边距是 10px

  • 右外边距和左外边距是 5px

  • 下外边距是 15px

例子 3

margin:10px 5px;
  • 上外边距和下外边距是 10px

  • 右外边距和左外边距是 5px

例子 4

margin:10px;
  • 所有 4 个外边距都是 10px

css样式用法

  • 如果规定一个值,比如 div {margin: 50px} - 所有的外边距都是 50 px

  • 如果规定两个值,比如 div {margin: 50px 10px} - 上下外边距是 50px,左右外边距是 10 px。

  • 如果规定三个值,比如 div {margin: 50px 10px 20px}- 上外边距是 50 px,而左右外边距是 10 px,下外边距是 20 px。

  • 如果规定四个值,比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px,右外边距是 10 px,下外边距是 20 px,左外边距是 30 px。

JavaScript 语法   

    object.style.margin="10px 5px"

实例

下面的例子改变了段落的外边距:

<html>
<head>
<script type="text/javascript">
function changeMargin()
{document.getElementById("p1").style.margin="100px";}
</script>
</head>
<body>

<input type="button" onclick="changeMargin()"
value="Change margins of a paragraph" />

<p id="p1">This is a paragraph</p>

</body>
</html>


微信公众号 weisico-com

微信公众号weisico-com

转载请注明:微思考学习网-关注技术,分享知识 >> CSS margin属性与用法教程

赞 (0) 收藏
分享到