border、margin、padding三者的区别
当你写前端的时候,肯定会遇到border,margin和padding这几个单词。
如:
padding: 16px 0;
margin: 0 10px;
在CSS中,他们是表示距离的东西,很多人刚开始搞不清楚他们的区别,我也是。在网上找到一个很好的说明他们之间的区别的示意图,border、margin、padding三者的区别。
- 边框属性(border)用来设定一个元素的边线。
- 边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
- 间隙属性(padding)是用来设置元素内容到元素边界的距离。
- 这三个属性都属于CSS中box类型的属性
看图,更容易理解:
一张盒模型的3D示意图,这个我现在暂时还理解不了:
另外补充说明,margin、padding的参数值可以有四、三、二或者一个分别作用于四边,如padding: 16px 0; :
四个:将按上右下左的顺序作用于四边
三个:第一个用于上,第二个用于左右,第三个用于下
两个:第一个用于上下,第二个用于左右
一个:将用于全部的四边
参考链接:
-- 《CSS 2.0中文手册》
border、margin、padding三者的区别的更多相关文章
- PHP全栈开发(八):CSS Ⅷ border margin padding
在CSS里面,所有的HTML元素都可以看成是一个盒子. 那么在设计和布局的时候,最常用的,也就是用来定义这个盒子的外边距的就是margin 定义这个盒子的内边距的就是padding 元素的内容所占的宽 ...
- css007 margin padding border
css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...
- margin 和 padding 的本质区别
问题? 如何弄清 margin 和 padding之间的区别? 那,答案呢? margin 边界, padding 填充 假如有一个盒子,padding就相当于盒子的厚度,盒子大小固定,通过修改pad ...
- border,padding,margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
- 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 ...
- 10-[CSS]-盒模型:border,padding,margin
1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- css的padding,border,margin的意思
下面的内边距(padding).边框(border) .外边距(margin)的意思是我自己的理解. 代码如下: <!DOCTYPE html> <html lang="e ...
- margin和padding那点事及常见浏览器margin padding相关Bug
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...
- margin/padding百分比值的计算
1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...
随机推荐
- #leetcode刷题之路16-最接近的三数之和
给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案. 例如,给定数 ...
- CentOS7 minimal(最小化安装)后增加的软件安装
1.net-tools 安装,因为习惯使用ifconfig命令 2.wget安装,下载工具必不可少 3.vim安装,相比于vi个人更喜欢vim 4.yum-plugin-priorities安装,用于 ...
- BootStrapValidate 简单使用
前阵子用了bootstrapvalidate写了一个登录验证,这里小记一笔 首先需要引入 bootstrapValidator.css //可不引入 jquery-2.1.0.min.js boots ...
- PHP代码优化—getter 和 setter
PHP中要实现类似于Java中的getter和setter有多种方法,比较常用的有: 直接箭头->调用属性(最常用),不管有没有声明这个属性,都可以使用,但会报Notice级别的错误 $dog ...
- 移植ARM linux下远程连接工具dropbear
移植ARM linux下远程连接工具dropbear 原文地址:http://www.cnblogs.com/NickQ/p/9010529.html 移植zlib 下载地址:https://gith ...
- python 3下对stm32串口数据做解析
1.最近有个想做一个传感器数据实时显示的上位机,常规的数据打印太频繁了,无法直观的看出数据的变化. python下的上位机实现起来简单一点,网上找了一些python界面Tkinter相关资料和pyth ...
- nodejs实现文件上传
在使用ant-design的upload上传文件时,前端很好实现,那么我们如何实现node服务端呢? 服务端文件上传实现 var express = require('express'); var f ...
- 【CS】知识索引汇总
Chapter 7 hello.o -> hello (链接) 一.静态链接 主要是将符号对应起来 两个主要任务:符号解析(符号引用与符号定义的对应).重定位(符号定义与内存位置的对应) 1. ...
- WPF GDI+字符串绘制成图片(一)
原文:WPF GDI+字符串绘制成图片(一) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83 ...
- 【转】odoo学习之:开发字段解析
odoo新API中,字段类型不变,继承改变 1.旧的API定义模型: from openerp.osv import osv,fields class oldmodel(osv.osv): #模型名称 ...