这篇会很短。

  

  那么如上图所示,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,几种参数的更多相关文章

  1. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. css padding和margin的百分比

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

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

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

  4. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

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

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

  6. 行内元素的padding和margin是否无效

    html中元素分为三种:块级元素.行内元素(也叫内联元素),内联块级元素. 常用块级元素:<div>.<p>.<h1>...<h6>.<ol> ...

  7. Android零基础入门第27节:正确使用padding和margin

    原文:Android零基础入门第27节:正确使用padding和margin 前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout ...

  8. 当padding,margin,top为百分比值,具体数值如何计算

    padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...

  9. 用padding与margin做多个元素的等间距分布

    这样做的好处是不管有多少个元素等间距分布,都可以直接写在li中,而且由于是给a设定的样式,所以在字数不一致的情况下,样式仍然是统一的. html: <!DOCTYPE html> < ...

  10. 关于padding与margin的区别

    代码一:全为padding. <!doctype html><html><head>    <meta charset="UTF-8"&g ...

随机推荐

  1. OleVariant的本质

    OleVariant的本质 OleVariant,COM的一种数据类型.MIDAS基于COM之上构建的,自然使用OleVariant作为数据序列格式. 延续到现在最新的DATASNAP仍然支持它. T ...

  2. 同步Flex Chart的数据提示

    原文 http://www.riafan.com/sync-datatips-for-flex-chart/ 图表数据提示的同步不仅包含单个图表内多个系列的数据提示的同步,也包含多个图表的数据提示的同 ...

  3. Android 为应用添加数字角标

    今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道an ...

  4. 在 Windows Azure 网站中进行纵向扩展和横向扩展

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Byron Tardif 撰写. 当您开始一个新的 Web 项目,或者刚刚开始开发一般的网站和应用程序时,您可能希望从小处着手. ...

  5. Windows下让Git记住用户名密码(https)

    最近开始跟老板共同维护公司的框架代码,于是毫不犹豫地选择了Git这个驰名的版本控制系统(公司使用的是TFS,但外网访问老是断线). 选择的托管平台是OSChina,原因是其可以新建私有项目. 在拉取和 ...

  6. Hoeffding连接到机器学习

    统计学场景: 一个罐子中有红球和绿球,红球比例$v$未知,数量未知,如何得到红球比例?方法---随机抽样N个球,在其中红球占比为$u$ 由hoeffding可以知道:$P(|u-v|>\epsi ...

  7. Android Activity 启动模式详解

    最近有群里的朋友问我 Activity的四种启动模式分别是什么意思? 当初因为项目比较忙,草草的解释了下, Api文档中说的也只是一般,在这里就小记一下吧,以便有更多的朋友对Activity启动模式了 ...

  8. sql2008中时间类型问题

    DATEDIFF (DD ,@sdate ,getdate() ) eg30 计算从开始日期到今天的天数 datename(weekday,@sdate) eg星期三 查询那一天是星期几 SQL Se ...

  9. Phoegap(cordova)开发跨平台app之HelloWorld

    PhoneGap(cordova)的hellworld程序 1           安装JDK 配置环境变量: 2           安装android-sdk 配置环境变量: set Path=E ...

  10. hdu 5727 Necklace 二分图匹配

    题目链接 给2*n个珠子, n<=9, n个阴n个阳. 然后将它们弄成一个环, 阴阳交替.现在给你m个关系, 每个关系给出a, b. 如果阳a和阴b挨着, 那么a就会变暗. 问你最小变暗几个阳. ...