当你写前端的时候,肯定会遇到border,margin和padding这几个单词。

如:
padding: 16px 0;
margin: 0 10px;

在CSS中,他们是表示距离的东西,很多人刚开始搞不清楚他们的区别,我也是。在网上找到一个很好的说明他们之间的区别的示意图,border、margin、padding三者的区别。

  • 边框属性(border)用来设定一个元素的边线。
  • 边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
  • 间隙属性(padding)是用来设置元素内容到元素边界的距离。
  • 这三个属性都属于CSS中box类型的属性

看图,更容易理解:

一张盒模型的3D示意图,这个我现在暂时还理解不了:

另外补充说明,margin、padding的参数值可以有四、三、二或者一个分别作用于四边,如padding: 16px 0; :

四个:将按上右下左的顺序作用于四边
三个:第一个用于上,第二个用于左右,第三个用于下
两个:第一个用于上下,第二个用于左右
一个:将用于全部的四边

注:border具体用法

参考链接:

-- 《CSS 2.0中文手册

border、margin、padding三者的区别的更多相关文章

  1. PHP全栈开发(八):CSS Ⅷ border margin padding

    在CSS里面,所有的HTML元素都可以看成是一个盒子. 那么在设计和布局的时候,最常用的,也就是用来定义这个盒子的外边距的就是margin 定义这个盒子的内边距的就是padding 元素的内容所占的宽 ...

  2. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  3. margin 和 padding 的本质区别

    问题? 如何弄清 margin 和 padding之间的区别? 那,答案呢? margin 边界, padding 填充 假如有一个盒子,padding就相当于盒子的厚度,盒子大小固定,通过修改pad ...

  4. border,padding,margin盒模型理解

    安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...

  5. background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

    1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...

  6. 10-[CSS]-盒模型:border,padding,margin

    1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  7. css的padding,border,margin的意思

    下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...

  8. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  9. margin/padding百分比值的计算

    1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...

随机推荐

  1. 关于javascript中call()和apply()方法的总结

    前段时间在使用javascript的过程中遇到了继承的问题,自己顺便就对call()和apply()方法进行了了解. 两个方法的共同之处:这两个方法作用相同,都用来改变当前函数调用的对象,即改变thi ...

  2. yyy loves Easter_Egg I(恶心的字符串模拟)

    题目背景 Soha的出题效率着实让人大吃一惊.OI,数学,化学的题目都出好了,物理的题还没有一道.于是,Huntfire,absi2011,redbag对soha进行轮番炸,准备炸到soha出来,不料 ...

  3. MYSQL 5.7.25最后一个5.x版本记录

      一:下载 位 https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.25-win32.zip 位 https://dev.mysql.co ...

  4. Ubuntu16.04 解决matplotlib乱码或者中文显示不了的问题(可用)

    一. 下载字体 SimHei.ttf 复制到linux字体库中 sudo cp ~/SimHei.ttf /usr/share/fonts/SimHei.ttf 二.查看matplotlib配置 In ...

  5. Java代码生成器CodeX4J介绍

    用代码生成器生成一些固定的或有规律的代码,可以有效的提高工作效率.我写了个开源的,放在了GitHub上,希望能对有需要的朋友有所帮助. GitHub代码地址https://github.com/jac ...

  6. linux系统基础之--目录结构(基于centos7.4 1708)

  7. 了解MapReduce_2

    再写MapReduce执行流程之前,首先先对MapReduce有一些了解: 1. 简介 MapReduce是一个计算框架,既然是做计算的框架,那么表现的形式上就有输入,操作输入,得到结果2.主从结构 ...

  8. Zeta--S3 Linux优化/缩短开机时间

    U-Boot1)axp20_set_ldo3实现里面把两个__msdelay(200);去掉,节省400ms2)sys_config.fex把下面的used设置为0,不使用开机指示灯闪烁,可以省掉35 ...

  9. pow函数(数学次方)在c语言的用法,两种编写方法实例( 计算1/1-1/2+1/3-1/4+1/5 …… + 1/99 - 1/100 的值)

    关于c语言里面pow函数,下面借鉴了某位博主的一篇文章: 头文件:#include <math.h> pow() 函数用来求 x 的 y 次幂(次方),x.y及函数值都是double型 , ...

  10. Hadoop学习总结之Map-Reduce的过程解析

    一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. 提交任务主要是通过JobClient.runJob(JobConf)静态函数实现的: public static Runnin ...