下面的内边距（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. 初识python 字符串 列表 字典相关操作

    python基础(一): 运算符: 算术运算: 除了基本的+ - * / 以外,还需要知道 :  // 为取整除 返回的市商的整数部分 例如: 9 // 2  ---> 4  , 9.0 //  ...

  2. linux下SVN CVS命令大全

    1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn: // 192.168. 1.1 / pro / doma ...

  3. 密码发生器 南阳acm519

    密码发生器 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 在对银行账户等重要权限设置密码的时候,我们常常遇到这样的烦恼:如果为了好记用生日吧,容易被破解,不安全:如 ...

  4. 学习CSS

    CSS教程 菜鸟教程 通过使用CSS我们可以大大提升网页开发的工作效率 什么是CSS? CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在 ...

  5. R语言学习笔记（四）：apply，sapply，lapply，tapply，vapply以及mapply的用法

    apply() apply(m,dimcode,f,fargs) m 是一个矩阵. dimcode是维度编号,取1则为对行应用函数,取2则为对列运用函数. f是函数 fargs是f的可选参数集 > ...

  6. React 省市区三级联动

    省市区所对应的数据来自:http://www.zgguan.com/zsfx/jsjc/6541.html react中的代码是: export default class AddReceive ex ...

  7. ABAP CDS ON HANA-(5)テーブル結合ビュー

    JOINs in CDS View In ABAP CDS, Join between two data sources is allowed. Allowed joins are:- Inner J ...

  8. List排序方法

    可用使用Collections.sort(List<T> list)和Collections.sort(List<T> list, Comparator<? super ...

  9. java实现单个或多个文件的压缩、解压缩 支持zip、rar等格式

    代码如下: package com.cn.util; import java.io.BufferedInputStream; import java.io.File; import java.io.F ...

  10. 揭秘css

    这是我看到非常好的一本电子教程,可以当参考手册使用,链接