1.padding和margin,几种参数
这篇会很短。

那么如上图所示,margin指的是外边距,padding指的是内边距,border自有其像素宽度,element在1335乘以392的地方。
margin和padding一样总共有四个,上右下左——top right bottom left。你可以选择margin-top这样一个个的去设置,也可以margin:10px 0 0 0;这样。
那么以margin为例,padding类似,后面可以跟的参数有三种形式。
1.margin: 3px 5px;——两个参,分别表示上下和左右,即上下外边距均为3px,左右外边距均为5px。
2.margin: 10px 15px 5px;——三个参,分别表示上、左右和下,即上外边距10px,左右外边距均为15px,下外边距为5px。
3.margin: 10px 7px 5px 8px;——四个参,分别表示上、右、下、左,即上外边距10px,右外边距7px,下外边距5px,左外边距8px。
padding是一样的写法和含义。
以上。
1.padding和margin,几种参数的更多相关文章
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- css padding和margin的百分比
前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...
- border,padding,margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 10-[CSS]-盒模型:border,padding,margin
1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- 行内元素的padding和margin是否无效
html中元素分为三种:块级元素.行内元素(也叫内联元素),内联块级元素. 常用块级元素:<div>.<p>.<h1>...<h6>.<ol> ...
- Android零基础入门第27节:正确使用padding和margin
原文:Android零基础入门第27节:正确使用padding和margin 前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout ...
- 当padding,margin,top为百分比值,具体数值如何计算
padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...
- 用padding与margin做多个元素的等间距分布
这样做的好处是不管有多少个元素等间距分布,都可以直接写在li中,而且由于是给a设定的样式,所以在字数不一致的情况下,样式仍然是统一的. html: <!DOCTYPE html> < ...
- 关于padding与margin的区别
代码一:全为padding. <!doctype html><html><head> <meta charset="UTF-8"&g ...
随机推荐
- 取PE文件的引入表和导出表
直接上代码(这里列出C++和Delphi的代码),Delphi代码中包含导入及导出文件和函数列表,PE结构可参阅资料,很多很详细,需要注意的是,本例中是映射到内存,不是通过PE装载器装入的,所以对于节 ...
- perl 继承写法
use base (Critter); 和 BEGIN{ require Critter; @ISA=qw/Critter/; } 这两种写法是等价
- 【转】Logistic regression (逻辑回归) 概述
Logistic regression (逻辑回归)是当前业界比较常用的机器学习方法,用于估计某种事物的可能性.比如某用户购买某商品的可能性,某病人患有某种疾病的可能性,以及某广告被用户点击的可能性等 ...
- Is life always hard?
原文来自我的独立blog: http://www.yuanyong.org/blog/midnightsun/is-life-always-hard 和两个朋友聊天. 小L在考研,打电话过去的时候小L ...
- linux学习(二)-目录的操作命令
Linux命令大全:http://www.jb51.net/linux/ 目录分绝对路径和相对路径 : 绝对路径,在路径前会加 / 相对路径就是相对于当前的路径,直接 路径名即可. 查看目录: cd ...
- Risk(最短路)
Risk Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2915 Accepted: 1352 Description ...
- Visual Studio使用技巧
编程部分: 1.TODO:书签 打开之后返回上次工作的位置.让我们不再用脑子去记忆,去回顾刚刚工作到的部分. 操作非常easy.例如以下代码所看到的: public DataTable SelectB ...
- 一个C/C++结构体初始化有趣的现象
我们知道C语言当中结构可以使用{}进行初始化,例如有结构体定义如下: typedef struct type_t { int a; int b; int c; int d; }type_t; 我们可以 ...
- MJExtension
MJExtension 长话短说下面我们通过一个列子来看下怎么使用 1. 先把框架拉进去你的项目 2. 首先我这次用到的json最外层是一个字典,根据数据的模型我们可以把这个归类为字典中有数组,数组中 ...
- js——事件
焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置焦点 1.点击 2.tab 3.js 不是所有元素都能够接收焦点的.能够响应用 ...