[HTML/CSS]margin属性用法
概述
在一些小的项目中,前台样式还是需要自己来写的,这时候,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属性用法的更多相关文章
- CSS margin属性与用法教程
margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性,margin是css控制块级元素之间的距离, 它们之间是透明不可见的. margin属性包含了margin left ...
- CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...
- css文本属性用法总结
稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration: 文本修饰(横线) 4 ...
- CSS margin属性取值
margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...
- CSS margin属性
例子: p{ margin:2cm 4cm 3cm 4cm; } 结果如下: margin-top是上外边距 margin-right是右外边距 margin-bottom是下外边距 margin-l ...
- CSS——margin
CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...
- 细说 CSS margin
作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...
- css margin的相关属性,问题及应用
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
随机推荐
- thinkpad x260 U盘进入
主要有三个问题: 1.bios 不支持U盘启动 联想电脑bios设置u盘启动方法如下:1.打开联想笔记本电脑,在出现开机画面时按F2进入bios设置界面,使用左右方向键将光标移至security菜单, ...
- swift xcode设置 ,代码折叠,全局折叠 快捷键
在preference text editing 里面打开 function 折叠的项, 折叠方法快捷键: option+command +left/right 全局折叠快捷键: shift+opti ...
- 谈数据中心SDN与NFV
看到一篇谈论SDN与NFV的文章,分析的还不错,贴过来方便自己后续查阅: http://network.chinabyte.com/175/13095675.shtml 论数据中心SDN与NFV技术关 ...
- html 表格获取单行
参考:http://www.jb51.net/article/63161.htm function cell(btn_id) { {#var x=document.getElementById('#' ...
- Map、Set、List初始化大小的影响
import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import java.util.Lis ...
- Newtonsoft.Json 序列化和反序列化 以及时间格式
1.JSON序列化 string JsonStr= JsonConvert.SerializeObject(Entity); eg: A a=new A(); a.Name="Elain ...
- MATLAB中的符号运算
1. syms命令 可以替换sym和symfun,另外可以定义符号变量的类型,如 syms x positive; 限定x为正数. 若要取消这个限定,则可以用命令 syms x clear; ...
- Spring Mvc中@ResponseBody中文乱码解决,以及修改返回的Content-Type
http://www.codeif.com/topic/784 spring 3 mvc 的 @ResponseBody返回数据用起来很方便,但是中文乱码,而且返回的Content-Type不带编码信 ...
- Laravel5.5配置使用redis
1.安装redis linux上redis的安装与配置 2.安装redis客户端 composer require predis/predis或者安装 PhpRedis PHP 扩展brew inst ...
- 如何成为云计算大数据Spark高手
Spark是发源于美国加州大学伯克利分校AMPLab的集群计算平台,它立足于内存计算,性能超过Hadoop百倍,从多迭代批量处理出发,兼收并蓄数据仓库.流处理和图计算等多种计算范式,是罕见的全能选手. ...