下面的内边距（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. Manacher（马拉车）学习笔记

    Manacher可以有效的在\(O(n)\)时间内解决一个字符串的回文子串的题目 目录 简介 讲解 推介 简单的练习 恐怖的练习QAQ 小结 简介 开头都说了,Manacher是目前解决回文子串的最有 ...

  2. 毕业2年 Summary

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/135 看了下去年写毕业一周年总结的时间:2017-6-16,今天 ...

  3. javaWeb总结

    url传值时:如out.println("<td><a href = 'delete.jsp?user=" + user + "'>删除</ ...

  4. Spring中的设计模式--观察者模式

    spring在容器中使用了观察者模式: 一.spring事件:ApplicationEvent,该抽象类继承了EventObject类,jdk建议所有的事件都应该继承自EventObject. 二.s ...

  5. [bzoj5158][Tjoi2014]Alice and Bob

    好羞愧啊最近一直在刷水... 题意:给定序列$c$的$a_i$,构造出一个序列$c$使得$\sum b_i$最大. 其中$a_i$表示以$c_i$结尾的最长上升子序列长度,$b_i$表示以$c_i$为 ...

  6. Python的re模块的常用方法

    一.re的match与search方法 1.re.match方法 re.match 尝试从字符串的起始位置匹配一个模式,匹配成功re.match方法返回一个匹配的对象,如果不是起始位置匹配成功的话,m ...

  7. 关于 SSH Server 的整体设定

    # . 关于 SSH Server 的整体设定,包含使用的 port 啦,以及使用的密码演算方式 Port # SSH 预设使用 这个 port,您也可以使用多的 port ! # 亦即重复使用 po ...

  8. Spring研磨分析、Quartz任务调度、Hibernate深入浅出系列文章笔记汇总

    Spring研磨分析.Quartz任务调度.Hibernate深入浅出系列文章笔记汇总 置顶2017年04月27日 10:46:45 阅读数:1213 这系列文章主要是对Spring.Quartz.H ...

  9. VectorDrawable在Android中的配置

    一.让Android支持VectorDrawable apply plugin: 'com.android.application' android { defaultConfig { vectorD ...

  10. react实现网站换肤功能

    一.目标   提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理   1.准备不同主题色的样式文件:   2.将用户的选择记录在本地缓存中:   3.每次进入应用时,读取缓存 ...