下面的内边距(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. node解析post表单信息

    一共有4种解析方式 urlencoded.json.text .raw 发起请求的form表单中可以设置三种数据编码方式 application/x-www-form-urlencoded.multi ...

  2. Go语言获取本地IP地址

    最近要做一个向局域网内的所有设备广播发送信息,并接受设备的回复信息,回复信息包括设备的版本号,IP地址,运行工程名等信息.发现一个局域网内是可以有不同的网段的,但UDP广播只能是同一个网段的广播.又发 ...

  3. HyperLedger Fabric 1.4 超级账本组织(5.3)

    超级账本组织分为TSC(技术指导委员会).Governing Board(董事会成员).LF Staffs(工作人员)三个组织,组织架构图如下: TSC:技术指导委会员,主导社区的开发工作,下设多个工 ...

  4. json格式转化

    python: json.dumps() : dict转成str json.loads():str转成dict  (去除字符串eva() ) JS: JSON.parse(text[, reviver ...

  5. javascript代码规范 [转]

    原文:http://www.css88.com/archives/5366 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Ex ...

  6. 签名的html

    <b><a href="http://www.feiyuanxing.com" style="color:red">未来星开发团队--狒 ...

  7. RevealTrans图片切换效果

    RevealTrans 更新时间:2013-06-01 17:11:59 | RevealTrans兼容性:IE5.5+ 语法: filter : progid:DXImageTransform.Mi ...

  8. Android 序列化比对

    本文转自:https://www.zybuluo.com/linux1s1s/note/91046 注:部分内容有更改 在Android中使用序列化,无非两种途经: Parcelable 和 Seri ...

  9. svn资源库url问题

    今天连接svn资源库的时候一直出现 RA layer request failedsvn: Unable to connect to a repository at URL http://... sv ...

  10. 用IIS防止mdb数据库被下载(转载)

    原网址:http://www.cnblogs.com/kingreatwill/p/4224433.html 第一种方法:要求网站管理人员具体asp编程经验.因为现在的销售虚拟主机的系统,已经为用户建 ...