下面的内边距（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. POJ2186 强连通分量+缩点

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 40234   Accepted: 16388 De ...

  2. （数据科学学习手札13）K-medoids聚类算法原理简介&Python与R的实现

    前几篇我们较为详细地介绍了K-means聚类法的实现方法和具体实战,这种方法虽然快速高效,是大规模数据聚类分析中首选的方法,但是它也有一些短板,比如在数据集中有脏数据时,由于其对每一个类的准则函数为平 ...

  3. java 堆栈内存分析详解

    计算机术语里面堆和栈代表不同的存储结构:stack-栈:heap-堆 所以java虚拟机(JVM)中堆和栈是两种内存 堆.栈对比 对比点 堆 栈 JVM中的功能 内存数据区 内存指令区 动静态 运行时 ...

  4. PHP.46-TP框架商城应用实例-后台21-权限管理-权限和角色的关系

    权限和角色的关系 权限功能 角色功能 权限与角色的关联要通过权限-角色表进行{多对多} /********* 角色-权限表 *********/ drop if exists p39_role_pri ...

  5. VINS紧耦合优化公式及代码解析

    1.首先确定待优化的状态变量 对应代码,优化参数为: Vector3d Ps[(WINDOW_SIZE + )];(平移向量) Vector3d Vs[(WINDOW_SIZE + )];(速度) M ...

  6. java doc 编写

    总而言之,我觉得有用的是: @see 只要敲了@see 然后会自动写你的类名的,很方便.# 去连接字段 {@link } 只要敲了{@link } 然后会自动写你的类名的,很方便.# 去连接字段 如果 ...

  7. gitk中文乱码问题处理

    执行了 git config --global gui.encoding utf- 查看 %USERPROFILE%\.gitconfig 文件中也有 [gui] encoding = utf-8 在 ...

  8. jmeter操作JDBC

    1. 依次添加计划.线程组.JDBC Connection Configuration.JDBC Request.HTTP请求.Debug Sampler.察看结果树 在计划中导入mysql的jdbc ...

  9. OpenCV入门：(七：OpenCV取随机数以及显示文字)

    1.随机颜色 OpenCV中自带了取随机数的方法,使用步骤: RNG rng( 0xFFFFFFFF ); 随机数 = rng.uniform( 下限,上限 ); 2.显示文字 , , bool bo ...

  10. Wordpress 从 MySQL 获取文章链接 permalinks

    SELECT wpp.post_title, wpp.guid, wpp.post_date, REPLACE( REPLACE( REPLACE( REPLACE( wpo.option_value ...