下面的内边距(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. class实现Stack

    基于class实现一个存储string类型的Stack 头文件: //stack.h #include<vector> #include<string> class Stack ...

  2. jsp中的input

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的 ...

  3. jmeter接口测试--参数化

    接口测试时遇到一些属性不能重复时,可以使用Random 随机函数,除此之外,也可以用用户参数 一..随机参数化 1.在jmeter工具,菜单-选项-函数助手对话框,输入数值,属性,点击生成: 2.在相 ...

  4. python 自动化-"Elements not visible"

    一,今天试着跑一个多乘客下单的python脚本, 总是遇到  Elements not visible 或者  not clickable的错误 解决方法: 1. 首先观察脚本运行时, 报错的那个元素 ...

  5. windows本地连接腾讯云的mysql服务器

    由于最近数据库需要用上Navicat作为数据库,但是我的mysql装在腾讯云的Ubuntu上,因此需要做些配置开放端口,和监听端口,因此略显麻烦,这里记录一下连接的具体步骤,方便以后又得装(flag) ...

  6. 分布式一致性算法之Paxos原理剖析

    概述 Zookeeper集群中,只有一个节点是leader节点,其它节点都是follower节点(实际上还有observer节点,不参与选举投票,在这里我们先忽略,下同).所有更新操作,必须经过lea ...

  7. 使用vue和web3创建你的第一个以太坊APP

    欢迎回到这个很牛的教程系列的第2部分,在教程中我们亲手构建我们的第一个分布式应用程序. 在第二部分中,我们将介绍VueJS和Vuex的核心概念,并引入web3js以与metamask进行交互. 如果你 ...

  8. Uva 294 Divisors(唯一分解定理)

    题意:求区间内正约数最大的数. 原理:唯一分解定义(又称算术基本定理),定义如下: 任何一个大于1的自然数 ,都可以唯一分解成有限个质数的乘积  ,这里  均为质数,其诸指数  是正整数.这样的分解称 ...

  9. Python 随笔01---列表

    列表 1.取出列表中的元素方法?? 2.删除列表中的元素del.remove对比?? 3.linux 常用操作命令

  10. mysql与hive2.1.1安装和配置

    1.mysql安装 这个安装很简单,是在线安装,只需要按顺序执行一下几个命令就ok了. (1)sudo apt-get install mysql-server (2)sudo apt-get ins ...