下面的内边距（padding）、边框(border) 、外边距(margin)的意思是我自己的理解。

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div style="border: solid 30px; padding: 30px; width: 30px;height: 30px;margin: 30px">

         o

     </div>

 </body>

 </html>

边框模型如下：我用的是谷歌浏览器：右击-->检查就会出现下图：

从下图我们可以知道：内边距(padding)元素距padding框的距离，border是padding到border的距离。margin是border到margin的距离。

css的padding,border,margin的意思的更多相关文章

  1. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

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

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

  3. css中padding与margin

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  4. CSS中padding、margin、bordor属性详解

    一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...

  5. CSS中padding、margin两个重要属性的详细介绍及举例说明

    http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...

  6. CSS中 Padding和Margin两个属性的详细介绍和举例说明

    代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  7. input元素的padding border margin的区别

    padding内(不包含padding)的部分才是可输入部分,也是width和height标明的区域.padding的部分加上width和height部分是background的部分.padding的 ...

  8. CSS笔记——padding，margin为百分比计算时的参照对象

    div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...

  9. CSS里padding和margin的区别是什么？

    通俗地说——padding 就是内容与边框的距离:margin 就是边框与其他元素的距离.

随机推荐

  1. ctf题目writeup（2）

    2019.1.29 题目地址: https://www.ichunqiu.com/battalion 1. 点开链接: include "flag.php";$a = @$_REQ ...

  2. C语言实例解析精粹学习笔记——30

    实例30: 用已知字符串s中的字符,生成由其中n个字符组成的所有字符排列.设n小于字符串s的字符个数,其中s中的字符在每个排列中最多出现一次.例如,对于s[]="abc",n=2, ...

  3. ubuntu64位运行32位程序

    sudo dpkg --add-architecture i386 sudo apt install libc6:i386 转:https://blog.csdn.net/zoomdy/article ...

  4. JS 实现AJAX封装（只限于异步）

    1.AJAX 分为异步 和 同步 请求 比如你去买一个食品,但是商店暂时没有这个食品 异步:等到商品有了再来买,这个期间我可以去做别的事: 同步:一直在这里等,什么时候商品来了,买到手了,再去做别的事 ...

  5. struts2官方 中文教程 系列十一：使用XML进行表单验证

    在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让 ...

  6. 关于实现mybatis order by 排序传递参数实现 问题记录

    一    问题场景:本人项目纯纯的后端系统  并且项目前端采用纯纯的原生js 实现 1)表格  通过查询列表数据放入到域中  前段采用 for循环的方式实现遍历生成列表 2)分页实现本人是公司内部自定 ...

  7. BI领军者之一Tableau试用浅谈

    下图是最新的Gartner BI Magic Quadrant,其中领军者之一的Tableau表现的异常突出,执行力象限上直接甩开其它产品一条街,前瞻性象限上略微超越了MSBI,怀着无比的好奇心,特意 ...

  8. [P2387魔法森林

    题面 题意: 给出一个图,边权有两维,a与b. 求1到n的一条路径使得路径经过的边的最大的a与b的和最小,输出最小之和. \(Solution:\) 如果做过这题,那么就显得很简单了很好想了. 又是想 ...

  9. 机器学习/逻辑回归（logistic regression）/--附python代码

    个人分类: 机器学习 本文为吴恩达<机器学习>课程的读书笔记,并用python实现. 前一篇讲了线性回归,这一篇讲逻辑回归,有了上一篇的基础,这一篇的内容会显得比较简单. 逻辑回归(log ...

  10. 机器学习sklearn的快速使用--周振洋

    ML神器:sklearn的快速使用 传统的机器学习任务从开始到建模的一般流程是:获取数据 -> 数据预处理 -> 训练建模 -> 模型评估 -> 预测,分类.本文我们将依据传统 ...