下面的内边距（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. Jupyter Notebook里面使用Matplotlib画图 图表中文乱码问题

    可查看以下链接: https://blog.csdn.net/ccblogger/article/details/79613335

  2. POJ 3210 ： Coins

    参考:https://blog.csdn.net/u010885899/article/details/46636523 http://kqwd.blog.163.com/blog/static/41 ...

  3. 【Leetcode】709. To Lower Case

    To Lower Case Description Implement function ToLowerCase() that has a string parameter str, and retu ...

  4. LOOP AT SCREEN

    用法 主に.画面の属性を変更させるために使用する. 照会モードでは入力不可とするが入力可能モードでは入力可能とする.ラジオボタンAが選択された場合はラジオボタンBに関連する項目は非表示とするなど.   ...

  5. P1215 [USACO1.4]母亲的牛奶 Mother's Milk

    P1215 [USACO1.4]母亲的牛奶 Mother's Milk 题目描述 农民约翰有三个容量分别是A,B,C升的桶,A,B,C分别是三个从1到20的整数, 最初,A和B桶都是空的,而C桶是装满 ...

  6. samba与apache配置使用

    samba与apache根目录 1.直接将apache用户作为samba用户 2.给apache用户赋宇网站根目录的acl rwx权限 #注意 第一次不要加默认的权限 setfacl -m u:apa ...

  7. 在spring+beranate中多数据源中使用 ThreadLocal ，总结的原理 --费元星

    设计模式 首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问 ...

  8. python内置模块[re]

    python内置模块[re] re模块: python的re模块(Regular Expression正则表达式)提供各种正则表达式的匹配操作,在文本解析.复杂字符串分析和信息提取时是一个非常有用的工 ...

  9. 《python核心编程第二版》第5章习题

    5-1 整形 讲讲 Python 普通整型和长整型的区别 答:普通整型 32位,长整数类型能表达的 数值仅仅与你的机器支持的(虚拟)内存大小有关 5-2 运算符(a) 写一个函数,计算并返回两个数的乘 ...

  10. 关于缺失值（missing value）的处理---机器学习 Imputer

    关于缺失值(missing value)的处理 在sklearn的preprocessing包中包含了对数据集中缺失值的处理,主要是应用Imputer类进行处理. 首先需要说明的是,numpy的数组中 ...