CSS margin属性与用法教程_免费织梦模板,wordpress主题,web前端设计,建站教程,Photoshop教程,免费网站模板资源下载

定义和用法

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

说明

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

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

注释：允许使用负值。

margin padding 盒子模型图解

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

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

免费织梦模板,wordpress主题,web前端设计,建站教程,Photoshop教程,免费网站模板资源下载_微思考

CSS margin属性与用法教程

定义和用法

说明

例子 1

例子 2

例子 3

例子 4

实例

百家号互联网微风说

微信公众号 weisico-com

相关阅读

定义和用法

说明

例子 1

例子 2

例子 3

例子 4

实例

百家号 互联网微风说

微信公众号 weisico-com

相关阅读

百家号互联网微风说