CSS margin 属性简介

CSS margin 属性

设置外边距的最简单的方法就是使用 margin 属性。

margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白:

h1 {margin : 0.25in;}

下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):

h1 {margin : 10px 0px 15px 5px;}

与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:

margin: top right bottom left

另外,还可以为 margin 设置一个百分比数值:

p {margin : 10%;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

值复制

还记得吗?我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。

有时,我们会输入一些重复的值:

p {margin: 0.5em 1em 0.5em 1em;}

通过值复制,您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的:

p {margin: 0.5em 1em;}

这两个值可以取代前面 4 个值。这是如何做到的呢?CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:

  • 如果缺少左外边距的值,则使用右外边距的值。
  • 如果缺少下外边距的值,则使用上外边距的值。
  • 如果缺少右外边距的值,则使用上外边距的值。

下图提供了更直观的方法来了解这一点:

CSS 值复制

换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。

利用这个简单的机制,您只需指定必要的值,而不必全部都应用 4 个值,例如:

h1 {margin: 0.25em 1em 0.5em;}	/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 等价于 1px 1px 1px 1px */

这种办法有一个小缺点,您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素,下外边距和右外边距设置为 30 像素。在这种情况下,必须写作:

p {margin: 20px 30px 30px 20px;}

这样才能得到您想要的结果。遗憾的是,在这种情况下,所需值的个数没有办法更少了。

再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto(左外边距是 20px):

p {margin: auto auto auto 20px;}

同样的,这样才能得到你想要的效果。问题在于,键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距,请使用单边外边距属性。

单边外边距属性

您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin(需要键入很多 auto),而是可以采用以下方法:

p {margin-left: 20px;}

您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

一个规则中可以使用多个这种单边属性,例如:

h2 {margin-top: 20px;margin-right: 30px;margin-bottom: 30px;margin-left: 20px;}

当然,对于这种情况,使用 margin 可能更容易一些:

p {margin: 20px 30px 30px 20px;}

不论使用单边属性还是使用 margin,得到的结果都一样。一般来说,如果希望为多个边设置外边距,使用 margin 会更容易一些。不过,从文档显示的角度看,实际上使用哪种方法都不重要,所以应该选择对自己来说更容易的一种方法。

提示和注释

提示:Netscape 和 IE 对 body 标签定义的默认边距(margin)值是 8px。而 Opera 不是这样。相反地,Opera 将内部填充(padding)的默认值定义为 8px,因此如果希望对整个网站的边缘部分进行调整,并将之正确显示于 Opera 中,那么必须对 body 的 padding 进行自定义。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/449829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MVC中使用代码创建数据库(code first +mysql+EF)

1.新建一个mvc项目 2.安装mysql需要的几个文件 EntityFramework、MySql.Data(6.9.12)和MySql.Data.Entity (6.9.12) 这里有几点要注意 1.MySql.Data和MySql.Data.Entity 版本必须一致 2.我试用了6.10的版本 要报错 3.我测试没有问…

github 学习使用

博主第一次使用github,所以会将过程全成描述欢迎使用Github注册安装进入仓库,创建、修改、上传文件。强制推送强制覆盖上传文件欢迎使用Github 注册 直接进入github官网:https://github.com 点击sigh up 进行注册 直接填写即可然后验证通过…

软件质量管理之困境与对策思考

相信在不少与软件开发相关的企业内,质量管理部门与软件开发部门在日常运作中形成了如下图所示的“哑铃形”组织结构。 开发部门执行质量管理部门所制定的流程,通过提供证据的形式将各种流程执行后的数据反馈给质量管理部门(包括缺陷率和各种流…

什么是 FreeMarker

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 转自官方文档,只是记录下官方在线手册地址:http://freemarker.foofun.cn/ FreeMarker 是一款 模板引擎&#xff…

C 温故知新 之 指针:数组指针、字符串指针、函数指针

一、数组指针 1.指向数组元素的指针 1、定义:还是那句话通俗的说指针就是地址   数组指针 :数组的起始地址 数组元素指针:数组元素的地址 2、定义一个指向数组元素的指针变量的方法,与之前介绍的指针变量相同。 例如&#…

mysql 查找配置文件 my.ini 位置方法

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 个人备注:不显示文件类型时,my.ini 文件名就叫作 my, 文件属性才显示 ini。 找到 my 文件看属性就知…

嵌入式操作系统内核原理和开发

嵌入式操作系统内核原理和开发(开篇) 操作系统是很多人每天必须打交道的东西,因为在你打开电脑的一刹那,随着bios自检结束,你的windows系统已经开始运行了。如果问大家操作系统是什么?可能有的人会说操作…

Java中对象比较

在Java之中不仅仅存在两个数字与两个字符串之间的比较,还存在两个对象之间的比较。 众所周知,两个数字之间的比较我们使用“”,两个字符串之间的比较我们使用“equals()”,那么两个对象之间如何进行比较呢?既然要进行两…

并发编程(多进程1)

一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程。Python提供了multiprocessing。 multiprocessing模块用来开启子进…

一本通1629聪明的燕姿

1629:聪明的燕姿 时间限制: 1000 ms 内存限制: 524288 KB【题目描述】 城市中人们总是拿着号码牌,不停寻找,不断匹配,可是谁也不知道自己等的那个人是谁。 可是燕姿不一样,燕姿知道自己等的人是谁,…

数据清洗,筛选

本人在私募,负责数据收集以及清洗,就是包括收集数据,按照领导要求,选出满足条件的数据,用于校验策略是否正确。 现在就在这进行代码上传,即用于自己总结整理,也用于供大家学习了解,实…

HSTS的来龙去脉

前言 安全经常说“云、管、端”,“管”指的是管道,传输过程中的安全。为了确保信息在网络传输层的安全,现在很多网站都开启了HTTPS,也就是HTTPTLS,在传输过程中对信息进行加密。HTTPS使用了对称加密、非对称加密、消息…

利用XShell上传、下载文件(使用sz与rz命令) 超实用!

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 rz、sz 安装方式:sz/rz命令安装方式 借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地&#…

quantaxis使用docker安装,解决了一个很奇特的问题

之前使用docker-compose pull 更新之后,使用docker-compose up进行安装。出现 qaweb显示address already in web,cmd中显示Starting qa_web is wrong。之前一直觉得什么毛病啊,试了很多办法。 比如关闭8010接口: netstat -ano|findstr “801…

Datawhale MySQL 训练营 Task2 查询语句

目录 MySQL 管理MySQL 用户管理 参考数据库管理SQ查询语句1. 导入示例数据库,教程 MySQL导入示例数据库2. 查询语句 SELECT3. 筛选语句 WHERE ,过滤4. 分组语句 GROUP BY5. 排序语句 ORDER BY6. 函数作业总结MySQL 管理 MySQL版本 8.0.15 MySQL 用户管理…

视差滚动(Parallax Scrolling)插件补充

13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件。该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被调用,所以你可以轻松的继承它来自定义导航菜单或更多的东西。下面是一个例子&#x…

MVC日期格式化,后台使用Newtonsoft.Json序列化日期,前端使用”f”格式化日期

MVC控制器中,经常使用Newtonsoft.Json把对象序列化成json字符串传递到前端视图。当对象中有DateTime类型的属性时,前后台如何处理才能把DateTime类型转换成想要的格式呢? 有这样的一个类具有DateTime类型属性: using System; name…

Google Go Programming In Eclipse

http://www.tutorialsavvy.com/2013/04/google-go-programming-in-eclipse.html/ Google Go Programming In Eclipse The new “Go” programming language is from Google co.It has many features better then other languages.Go language features are:-– High Speed Comp…

pycharm打开ipynb显示为文本格式解决办法

然后进入 添加类型 jupyter notebook 然后下方添加 *.ipynb

[基础篇]ESP32-RTOS-SDK教程(一)之Windows环境搭建

当下正是物联网最好的时代,学习新的技术怎么能只学习ESP8266呢?要知道ESP8266还有一个孪生兄弟呢,最重要的是这个孪生兄弟要比ESP8266是更厉害的,所以我们也是非常有必要学习一下的,其实这篇文章去年就已经写了&#x…