在html中设置margin属性,margin-程序员宅基地
技术标签： 在html中设置margin属性
margin
(CSS语法)
编辑
锁定
讨论
上传视频
margin，是CSS语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。
中文名
外边距[1]外文名
margin
编程语言
CSS
margin定义
编辑
margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。
margin 属性接受任何长度单位、百分数值甚至负值。
margin 属性可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。[2]
margin简洁写法
编辑
margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。
margin写法有4种，分别如下：margin: 像素值1;
margin: 像素值1 像素值2;
margin: 像素值1 像素值2 像素值3;
margin: 像素值1 像素值2 像素值3 像素值4;
以上四个位置按顺序分别为：margin-top--margin-right--margin-bottom--margin-left，即“上-右-下-左”。以下简写为top--right--bottom--left。其中需要注意的是后三种情况，当有像素值缺省时，浏览器会自动对缺省像素按照“bottom=top”和“left=right”的方法进行赋值。
例如：
“margin:20px;”表示四个方向的外边距都是20px；
“margin:20px 40px;”表示top为20px，right为40px；由于bottom和left缺省，所以自动将它们分别设为20px和40px。转化为第4种写法为：“margin:20px 40px 20px 40px;”。
“margin:20px 40px 60px;”表示top为20px，right为40px，bottom为60px；由于left缺省，所以自动将它设为40px。转化为第4种写法为：“margin:20px 40px 60px 40px;”。
需要注意的是一种情况不能写为缺省写法：“margin:20px 40px 20px 60px;”。该例中，由于top和bottom相同，但right和left不同，所以不能将bottom缺省，否则会等同于“margin:20px 40px 60px 40px;”。
margin语法说明
编辑
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
margin边距属性
编辑
属性描述
margin简写属性。在一个声明中设置所有外边距属性。[1]
margin-top设置元素的上外边距。
margin语法结构
编辑
margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距,左右边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距
注释：允许使用负值。
margin语法举例
编辑
例子 1margin:10px 5px 15px 20px;上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2margin:10px 5px 15px;上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3margin:10px 5px;上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4margin:10px;所有 4 个外边距都是 10px默认值：0
继承性：no
JavaScript 语法：object.style.margin="10px 5px"
margin实例
编辑
设置 p 元素的 4 个外边距：
p { margin:2cm 4cm 3cm 4cm; }
margin浏览器支持
编辑
所有浏览器都支持 margin 属性。
注释：任何的版本的 Internet Explorer(包括 IE8)都不支持属性值 "inherit"。
margin可能的值
编辑
值描述
auto浏览器计算外边距。
length规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%规定基于父元素的宽度的百分比的外边距。
inherit规定应该从父元素继承外边距。
[3-4]
margin内外距离区别
编辑
这是很多学html 人的困扰
其实说白了padding就是内容与边框的空隙.而margin 则是模块与模块的空隙.下面图解:
margin 与 padding 得盒子模型图解
margin实例
编辑
本例演示如何将所有的边距属性设置于一个声明中。
p.margin{margin:50px100px75px100px}
这个段落没有指定外边距。
这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。
这个段落没有指定外边距。
词条图册
更多图册
参考资料
1.
CSS Margin(外边距)
．w3cschool菜鸟教程．2014-02-21[引用日期2014-02-23]
2.
CSS margin
．W3Cschool[引用日期2018-04-12]
3.
CSS margin 属性
．w3cshcoll[引用日期2012-11-21]
4.
CSS margin 属性
．w3school 在线教程[引用日期2013-06-15]
智能推荐
Spring Boot 获取 bean 的 3 种方式！还有谁不会？，Java面试官_springboot2.7获取bean-程序员宅基地
文章浏览阅读1.2k次，点赞35次，收藏18次。AutowiredPostConstruct 注释用于在依赖关系注入完成之后需要执行的方法上，以执行任何初始化。此方法必须在将类放入服务之前调用。支持依赖关系注入的所有类都必须支持此注释。即使类没有请求注入任何资源，用 PostConstruct 注释的方法也必须被调用。只有一个方法可以用此注释进行注释。_springboot2.7获取bean
Logistic Regression Java程序_logisticregression java-程序员宅基地
文章浏览阅读2.1k次。理论介绍 节点定义package logistic;public class Instance { public int label; public double[] x; public Instance(){} public Instance(int label,double[] x){ this.label = label; th_logisticregression java
linux文件误删除该如何恢复？，2024年最新Linux运维开发知识点-程序员宅基地
文章浏览阅读981次，点赞21次，收藏18次。本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。下面我们来进行文件的恢复，执行下文中的lsof命令，在其返回结果中我们可以看到test-recovery.txt (deleted)被删除了，但是其存在一个进程tail使用它，tail进程的进程编号是1535。我们看到文件名为3的文件，就是我们刚刚“误删除”的文件，所以我们使用下面的cp命令把它恢复回去。命令进入该进程的文件目录下，1535是tail进程的进程id，这个文件目录里包含了若干该进程正在打开使用的文件。
流媒体协议之RTMP详解-程序员宅基地
文章浏览阅读10w+次，点赞12次，收藏72次。RTMP(Real Time Messaging Protocol)实时消息传输协议是Adobe公司提出得一种媒体流传输协议，其提供了一个双向得通道消息服务，意图在通信端之间传递带有时间信息得视频、音频和数据消息流，其通过对不同类型得消息分配不同得优先级，进而在网传能力限制下确定各种消息得传输次序。_rtmp
微型计算机2017年12月下,2017年12月计算机一级MSOffice考试习题(二)-程序员宅基地
文章浏览阅读64次。2017年12月的计算机等级考试将要来临!出国留学网为考生们整理了2017年12月计算机一级MSOffice考试习题，希望能帮到大家，想了解更多计算机等级考试消息，请关注我们，我们会第一时间更新。2017年12月计算机一级MSOffice考试习题(二)一、单选题1). 计算机最主要的工作特点是( )。A.存储程序与自动控制B.高速度与高精度C.可靠性与可用性D.有记忆能力正确答案：A答案解析：计算...
20210415web渗透学习之Mysqludf提权（二）（胃肠炎住院期间转）_the provided input file '/usr/share/metasploit-fra-程序员宅基地
文章浏览阅读356次。在学MYSQL的时候刚刚好看到了这个提权，很久之前用过别人现成的，但是一直时间没去细想， 这次就自己复现学习下。 0x00 UDF 什么是UDF？ UDF (user defined function)，即用户自定义函数。是通过添加新函数，对MySQL的功能进行扩充，就像使..._the provided input file '/usr/share/metasploit-framework/data/exploits/mysql
随便推点
webService详细-程序员宅基地
文章浏览阅读3.1w次，点赞71次，收藏485次。webService一 WebService概述1.1 WebService是什么WebService是一种跨编程语言和跨操作系统平台的远程调用技术。Web service是一个平台独立的，低耦合的，自包含的、基于可编程的web的应用程序，可使用开放的XML（标准通用标记语言下的一个子集）标准...
Retrofit(2.0)入门小错误 -- Could not locate ResponseBody xxx Tried: * retrofit.BuiltInConverters_已添加addconverterfactory 但是 could not locate respons-程序员宅基地
文章浏览阅读1w次。前言照例给出官网：Retrofit官网其实大家学习的时候，完全可以按照官网Introduction，自己写一个例子来运行。但是百密一疏，官网可能忘记添加了一句非常重要的话，导致你可能出现如下错误：Could not locate ResponseBody converter错误信息：Caused by: java.lang.IllegalArgumentException: Could not l_已添加addconverterfactory 但是 could not locate responsebody converter
一套键鼠控制Windows+Linux——Synergy在Windows10和Ubuntu18.04共控的实践_linux 18.04 synergy-程序员宅基地
文章浏览阅读1k次。一套键鼠控制Windows+Linux——Synergy在Windows10和Ubuntu18.04共控的实践Synergy简介准备工作（重要）Windows服务端配置Ubuntu客户端配置配置开机启动Synergy简介Synergy能够通过IP地址实现一套键鼠对多系统、多终端进行控制，免去了对不同终端操作时频繁切换键鼠的麻烦，可跨平台使用，拥有Linux、MacOS、Windows多个版本。Synergy应用分服务端和客户端，服务端即主控端，Synergy会共享连接服务端的键鼠给客户端终端使用。本文_linux 18.04 synergy
nacos集成seata1.4.0注意事项_seata1.4.0 +nacos 集成-程序员宅基地
文章浏览阅读374次。写demo的时候遇到了很多问题，记录一下。安装nacos1.4.0配置mysql数据库，新建nacos_config数据库，并根据初始化脚本新建表，使配置从数据库读取，可单机模式启动也可以集群模式启动，启动时 ./start.sh -m standaloneapplication.properties 主要是db部分配置## Copyright 1999-2018 Alibaba Group Holding Ltd.## Licensed under the Apache License,_seata1.4.0 +nacos 集成
iperf3常用_iperf客户端指定ip地址-程序员宅基地
文章浏览阅读833次。iperf使用方法详解 iperf3是一款带宽测试工具，它支持调节各种参数，比如通信协议，数据包个数，发送持续时间，测试完会报告网络带宽，丢包率和其他参数。 安装 sudo apt-get install iperf3 iPerf3常用的参数： -c ：指定客户端模式。例如：iperf3 -c 192.168.1.100。这将使用客户端模式连接到IP地址为192.16..._iperf客户端指定ip地址
浮点性(float)转化为字符串类型 自定义实现和深入探讨C++内部实现方法_c++浮点数 转 字符串 精度损失最小-程序员宅基地
文章浏览阅读7.4k次。 写这个函数目的不是为了和C/C++库中的函数在性能和安全性上一比高低，只是为了给那些喜欢探讨函数内部实现的网友，提供一种从浮点性到字符串转换的一种途径。 浮点数是有精度限制的，所以即使我们在使用C/C++中的sprintf或者cout 限制，当然这个精度限制是可以修改的。比方在C++中，我们可以cout.precision(10),不过这样设置的整个输出字符长度为10，而不是特定的小数点后1_c++浮点数 转 字符串 精度损失最小