概述

在一些小的项目中,前台样式还是需要自己来写的,这时候,margin在布局中还是有一定的地位的。上篇文章中介绍的盒子模型中,就有margin的存在。

margin

margin可以用来设置css块级元素之间的距离。

        * {
/*距左元素块距离(设置距左内边距)*/
margin-left: 0px;
/*距右元素块距离(设置距右元素块距) */
margin-right: 0px;
/*底元素块距离(设置距低(下)元素块距)*/
margin-bottom: 0px;
/*距头顶(上)元素块距离(设置距顶部元素块距离)*/
margin-top: 0px;
}

除了使用像素外,还可以使用百分比的方式

         * {
/*距离左元素块距10像素,可跟百分比如(margin-left:10%; 距离左元素块10%的距离)*/
margin-left: 10px;
/*距离右边元素块距10像素,可跟百分比如(margin-right:10%; 距离右边元素块10%的距离) */
margin-right: 10px;
/*距离低边元素块距10像素,可跟百分比如(margin-bottom:10%; 距离底边元素块10%的距离)*/
margin-bottom: 10px;
/*距离顶边元素块距10像素,可跟百分比如(margin-top:10%; 距离顶边元素块10%的距离)*/
margin-top: 10px;
}

可以有更简单的方式来写:

        div {
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是按照顺时针的方向设置值的。
参考:http://www.divcss5.com/shili/s6.shtml

[HTML/CSS]margin属性用法的更多相关文章

  1. CSS margin属性与用法教程

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

  2. CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...

  3. css文本属性用法总结

    稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration:  文本修饰(横线) 4 ...

  4. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  5. CSS margin属性

    例子: p{ margin:2cm 4cm 3cm 4cm; } 结果如下: margin-top是上外边距 margin-right是右外边距 margin-bottom是下外边距 margin-l ...

  6. CSS——margin

    CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...

  7. 细说 CSS margin

    作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...

  8. css margin的相关属性,问题及应用

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...

  9. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

随机推荐

  1. thinkpad x260 U盘进入

    主要有三个问题: 1.bios 不支持U盘启动 联想电脑bios设置u盘启动方法如下:1.打开联想笔记本电脑,在出现开机画面时按F2进入bios设置界面,使用左右方向键将光标移至security菜单, ...

  2. swift xcode设置 ,代码折叠,全局折叠 快捷键

    在preference text editing 里面打开 function 折叠的项, 折叠方法快捷键: option+command +left/right 全局折叠快捷键: shift+opti ...

  3. 谈数据中心SDN与NFV

    看到一篇谈论SDN与NFV的文章,分析的还不错,贴过来方便自己后续查阅: http://network.chinabyte.com/175/13095675.shtml 论数据中心SDN与NFV技术关 ...

  4. html 表格获取单行

    参考:http://www.jb51.net/article/63161.htm function cell(btn_id) { {#var x=document.getElementById('#' ...

  5. Map、Set、List初始化大小的影响

    import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import java.util.Lis ...

  6. Newtonsoft.Json 序列化和反序列化 以及时间格式

    1.JSON序列化 string JsonStr= JsonConvert.SerializeObject(Entity); eg:   A a=new A(); a.Name="Elain ...

  7. MATLAB中的符号运算

    1.      syms命令 可以替换sym和symfun,另外可以定义符号变量的类型,如 syms x positive; 限定x为正数. 若要取消这个限定,则可以用命令 syms x clear; ...

  8. Spring Mvc中@ResponseBody中文乱码解决,以及修改返回的Content-Type

    http://www.codeif.com/topic/784 spring 3 mvc 的 @ResponseBody返回数据用起来很方便,但是中文乱码,而且返回的Content-Type不带编码信 ...

  9. Laravel5.5配置使用redis

    1.安装redis linux上redis的安装与配置 2.安装redis客户端 composer require predis/predis或者安装 PhpRedis PHP 扩展brew inst ...

  10. 如何成为云计算大数据Spark高手

    Spark是发源于美国加州大学伯克利分校AMPLab的集群计算平台,它立足于内存计算,性能超过Hadoop百倍,从多迭代批量处理出发,兼收并蓄数据仓库.流处理和图计算等多种计算范式,是罕见的全能选手. ...