CSS margin属性与用法教程

margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的。

margin属性包含了margin left :距元素块距离(设置距左内边距) ;margin top:距头顶(上)元素块距离(设置距顶部元素块距离);margin right :距右元素块距离(设置距右元素块距) ;margin bottom :元素块距离(设置距低(下)元素块距)。其二维构建图可见CSS属性二维图。


margin的解剖图

margin left用法:margin-left:10px;  这个意思距离左元素块距10像素,可跟百分比如(margin-left:10%;   距离左元素块10%的距离)css margin-left教程
margin right用法:margin-right:10px; 这个意思距离边元素块距10像素,可跟百分比如(margin-right:10%; 距离边元素块10%的距离);
margin top用法:margin-top:10px; 这个意思距离边元素块距10像素,可跟百分比如(margin-top:10%; 距离边元素块10%的距离)css margin-top
margin bottom用法:margin-bottom:10px; 这个意思距离边元素块距10像素,可跟百分比如(margin-bottom:10%; 距离边元素块10%的距离)css margin-bottom
注意margin中间的链接“ - ”号,设置距离值时用“  ”并赋予值,并以“  ”结束,并且全部用小写半角字母

如果是左右上下都需要设置margin的值时可以简写来实现,以优化css 。
如简写方式有:
margin:10px; 意思就是上下左右元素块距离就是10px(10像素)等于margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 一样效果简写;
margin:5px 10px; 意思上下元素块距离为5px,左右的元素块距离为10px,等于margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 一样效果简写;
margin:5px 6px 7px; 意思上元素块距离5px,下元素块距离为7PX,左右元素块距离为6px,等于margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 一样效果简写; 
margin:5px 6px 7px 8px;  意思上元素块为5px,右元素块距离为6px ,下元素块距离为7px,左元素块距离8px,等于等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 一样效果简写;

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


margin的属性转法图解

上面即是div css网站总结的margin的属性与用法。其中margin的用与padding相同。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s6.shtml

时间: 2024-10-08 06:05:54

CSS margin属性与用法教程的相关文章

理解CSS Clip属性及用法

应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ } 属性解析: clip: { shape | auto | inherit } ; auto 即浏览器默认解析,无clip效果,inderit 继承

CSS vertical-align属性的用法

这两天写个页面css的时候用到了vertical-align属性,使用过程中踩到了坑,所以总结如下: vertical-align的定义 W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式. 文本通常根据不可见的基线进行对齐的,而字母的底部位于基线之上.vertical-

CSS margin属性取值

margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-top <div id="negtive_top"> <div>margin-top: -50px;自身向上移动50px</div> </div> CSS #negtive_top{ background-color: green; borde

CSS margin 属性

实例 设置 p 元素的 4 个外边距: p { margin:2cm 4cm 3cm 4cm; } 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距.行内元素的的左右外边距不会合并.同样地,浮动元素的外边距也不会合并.允许指定负的外边距值,不过使用时要小心. 注释:允许使用负值. 例子 1 margin:1

JS控制css float属性的用法经验总结

JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可.如:obj.style.marginTop,obj.style.borderLeftWidth,obj.

css标签属性及用法

css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = "text/css">要写的样式</style> 2.外联式  <link rel = "stylesheet"  type = "text/css"  href = "css/public.css"  /> 3.行内式(主要用于JS控制元素的样式):style="color:red;"

第三课 CSS的属性与用法

1.border 边框 可以按顺序设置如下边框属性: 属性 值 描述 border-width  以PX为单位  边框的粗细 border-style 1.solid      实线 2.dashed  虚线 3.dotted   点线 边框的样式  border-color 可以用英文,如:red 也可以在色板里选择 边框的颜色  通常采用简写的方式: 简写方式:border:solid 1px #FOF; 实例: HTML部分: <div id="d1"></di

细说 CSS margin

作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 本文着重描述关于 margin,我们日常不太容易发现的“坑”. 盒模型 接触过 CSS 的人应该都知道 CSS 的盒模型: 由内容边缘(Content edge)包围形成的是内容盒(Content Box),类推还有内边距盒(Padding Box).边框盒(Border Box).外边距盒(Margin Box).其中内容盒.内边距盒.

CSS margin用法详解

CSS的margin用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.margin属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义对象的外边距的,也称之为外补白,所谓的外边距就是围绕边框外侧的空白区域.可以单独定义上下左右某一方位的外边距.代码实例如下:实例一:子div没有外边距的情况: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &