margin与padding的区别是什么?

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍 什么是margin 什么是padding 我们在进行网页制作时都会遇到为元素设定边距的情况,边距又分为内边距和外边距,即margin和padding.

margin和padding是在html中的盒模型的基础上出现的,

margin是盒子的外边距,即盒子与盒子之间的距离,而padding是内边距,是盒子的边与盒子内部元素的距离。

2.知识剖析 margin是什么? CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界,元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

padding是什么? padding 属性设置元素的内边距,属性定义元素边框与元素内容之间的空间。

同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”

Margin的特性 margin始终是透明的。margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。

margin只有一个值表示上右下左,如果 margin 只有两个值第一个值表示上下,第二个值为左右。

margin有三个值 表示上左右下,margin有四个值表示上下左右四个方向。

padding的特性 padding属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,

从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

3.常见问题 1.什么是盒子模型。

2.margin和padding的区别。

3.用margin好还是用padding好。

4.解决方案 什么是盒子模型。

具备内容、填充、边框、边界这些属性,能包含其他元素的容器都是盒子。

margin和padding的区别。 我们以DIV为一个盒子为例,既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的纸壁给他起个名字叫“border(边框)”,如果盒子内部的东西比如是一块硬盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫“padding(内边距)”,如果我们需要购买许多块硬盘,还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充,那么盒子和盒子之间的距离我们称之为"margin(外边距)"

用margin好还是用padding好 何时应当使用margin:

需要在border外侧添加空白时。

空白处不需要背景(色)时。

                上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。
复制代码

何时应当时用padding:

需要在border内测添加空白时。

空白处需要背景(色)时。

                上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。
复制代码

margin在块级元素 margin在块级元素下,他的性能可以完全体现,上下左右任你设定.

margin在行级元素 margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。

总结 margin属性可以应用于几乎所有的元素,除了表格显示类型。

padding属性的使用1.需要在border内测添加空白时。

                2.空白处需要背景(色)时。
复制代码

margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

5.编码实战 6.扩展思考 什么是margin折叠? 在CSS中,两个或以上的块元素(可能是兄弟,也可能不是)之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠,且产生的已合并的外边距被称为折叠外边距。 处于同一个块级上下文中的块元素,没有行框、没有间隙、没有内边距和边框隔开它们,这样的元素垂直边缘毗邻,则称之为相邻。

7.参考文献 参考一:

                margin的详细用法
复制代码

参考二:

                怎么区分margin 和 padding的区别。
复制代码

参考三

                盒子模型知多少
复制代码

参考四

                margin为负值产生的影响和常见布局应用
复制代码

8.更多讨论 鸣谢 感谢大家观看

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

作者:menggx1
链接:https://juejin.im/post/5ae6b9516fb9a07aab29a14e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

margin与padding的区别是什么?的更多相关文章

  1. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  2. margin与padding大比拼

    用margin还是用padding这个问题相信是每个学css的人都想要去深入了解的. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距 ...

  3. 关于margin、padding 对内联元素的影响

    内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin  padding 对inline元素的影响. 测 ...

  4. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  5. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  6. web兼容学习分析笔记-margin 和padding浏览器解析差异

    二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px  margin:15px 10px 15px 10px(IE7) <b ...

  7. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  8. DIV+CSS:Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  9. * {margin:0px; padding:0px;}什么意思?

    * {margin:0px; padding:0px;} *  表示所有的元素的对齐方式以及和父类之间的间距都为0 body{margin:0px;padding:0px;} body里面的则表示的是 ...

随机推荐

  1. 自己整理JS数据的基本知识

    自己整理JS数据的基本知识 javascript部分: 1.引入的方式包括外链和内联. 2.JS的数据类型有哪些? 原始类型和引用类型; undefined类型,值为undefined; null类型 ...

  2. laradock 部署 php 环境 和 laravel/lumen 框架

    环境是windows 10 版本1809,docker 版本18.09.0 首先是下载docker.git, 具体可以参考 http://laradock.io/ 要求 Docker >= 17 ...

  3. 【FICO系列】SAP ABAP&FI FI/CO接口:待更新的不一致的FI/CO凭证标题数据

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP ABAP&FI ...

  4. 【Linux开发】CCS远程调试ARM,AM4378

    注意一点:CCS也是安装在Linux主机上的,不是安装在Windows上的,我在Windows上做出了很多尝试,但最终也不没明白究竟要用怎样的格式去执行在ARM-Linux应用程序,out文件ELF可 ...

  5. vue项目中,无需打包而动态更改背景图以及标题

    1.背景 今天,项目经理对已完成的项目提出了一个需求,即项目的基础功能目前针对于各个基层法院都适用,而对于不同的法院,我们每次都需要前端研发来更改所属法院的法院名称以及背景图,这样对于演示者来说是非常 ...

  6. MySQL数据库的特点和优势

    MySQL数据库的特点和优势: 1.MySQL性能卓越.服务稳定,很少出现异常宕机. 2.MySQL开放源代码且无版权制约,自主性及使用成本低. 3.MySQL历史悠久,用户使用活跃,遇到问题可以寻求 ...

  7. iview报错[Vue warn]: Error in render: "TypeError: ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot] is not a function"

    原因是我使用了iview的<Table>组件,我给Table组件的columns中定义了4个含有slot的列,但是实际在<Table>中只使用了其中3个,导致的报错. 也就是说 ...

  8. Tarjan水题系列(1):草鉴定Grass Cownoisseur [USACO15JAN]or[luogu P3119]

    题目如下: 约翰有n块草场,编号1到n,这些草场由若干条单行道相连.奶牛贝西是美味牧草的鉴赏家,她想到达尽可能多的草场去品尝牧草. 贝西总是从1号草场出发,最后回到1号草场.她想经过尽可能多的草场,贝 ...

  9. jquery导航栏高亮(二级菜单点击一级保持高亮)

    <script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...

  10. 1、Java语言概述与开发环境——Java特性和技术体系平台

    一.Java语言的主要特性 1.Java语言是易学的: Java语言的语法与C语言和C++语言很接近,使得大多数的程序员很容易学习和使用Java. 2.Java语言是强制面向对象的: Java语言提供 ...