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 进行注册 直接填写即可然后验证通过…

Java中9大内置基本数据类型Class实例和数组的Class实例

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1、Java中9大内置几本数据类型: 对于对象来说,可以直接使用对象.getClass()或者Class.forName(className);、类名.class都可以…

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

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

GDI+用PNG图片做半透明异型窗口

{*******************************************************}{ }{ GDI用PNG图片做半透明异型窗口 }{ }{ 版权所有 (C) 2008 QQ:…

java Spring Boot中使用Swagger2构建API文档

1、添加Swagger2的依赖 在pom.xml中加入Swagger2的依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.2.2</version> </dependency> <dependency><groupId&g…

什么是 FreeMarker

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

TP函数

U方法用于完成对URL地址的组装&#xff0c;特点在于可以自动根据当前的URL模式和设置生成对应的URL地址&#xff0c;格式为&#xff1a;U(地址,参数,伪静态,是否跳转,显示域名);在模板中使用U方法而不是固定写死URL地址的好处在于&#xff0c;一旦你的环境变化或者参数设置改变…

爬虫——————爬取中金所,深交所,上交所期权数据

先从深交所开始&#xff1a;直接上传源码&#xff1a; from bs4 import BeautifulSoup from lxml import etree import pandas as pd import akshare as ak import datetime import requests import csv from contextlib import closing import time from urllib.request impo…

linux下的C语言开发

linux下的C语言开发&#xff08;开篇&#xff09; 在很多人的眼里&#xff0c;C语言和linux常常是分不开的。这其中的原因很多&#xff0c;其中最重要的一部分我认为是linux本身就是C语言的杰出作品。当然&#xff0c;linux操作系统本身对C语言的支持也是相当到位的。作为一个…

sql语法学习

本人数据库目前使用的是sql&#xff0c;主要是使用python语言&#xff0c;然后用pandas调用&#xff08;真的很方便&#xff09;。所以就总结一下&#xff0c;也为自己以后调用数据查找方便使用。 导入包 from sqlalchemy import create_engine import pymssql连接数据库 con…

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

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

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

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

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

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

Java中对象比较

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

如何安装pfbprophet

最近facebook出来了一个软件包&#xff0c;可以用于时序数据预测&#xff0c;但是安装上&#xff0c;遇到问题不小&#xff0c;本人也在安装中遇到大大小小各种问题&#xff0c;然后查了各种资料&#xff0c;进行研究&#xff0c;终于找到一个最简单的办法。 不废话&#xff0…

JeeSite 4.0 (1.0)开发环境部署运行

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 环境要求 1、Java SDK 1.8 下载 2、Eclipse IDE for Java EE Mars 2 (4.5.2) 下载&#xff08;依Eclipse举例&#xff0c;IDEA雷同。&…

dojo 七 DOM dojo/dom

官方教程&#xff1a;Dojo DOM Functions对dom的使用&#xff0c;需要引用包dojo/dom。1.获取节点&#xff0c;dom.byIdbyId中既可以传递一个字符串&#xff0c;也可以传递一个节点对象 require(["dojo/dom", "dojo/domReady!"], function(dom) {function …

quantaxis中使用docker安装,出现的问题

本人在使用docker安装quantaxis时&#xff0c;经常发生docker报错&#xff0c;原因是与 wsl2冲突。之前不知道原因&#xff0c;直接就是卸载重装&#xff0c;累死我了。现在知道后&#xff0c;将解决方案记下&#xff0c;帮助后来者继续前行。 管理员打开cmd&#xff0c;输入 …

并发编程(多进程1)

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