一、基本知识

  padding:元素内边距,指的是元素内边框到元素中内容的距离。

  用法:

    padding:长度|百分比

    padding-top:长度|百分比

    padding-bottom:长度|百分比

    padding-left:长度|百分比

    padding-right:长度|百分比

  margin:元素外边距,指的是元素外边框到父元素的距离。

  用法:

    margin:长度|百分比

    margin-top:长度|百分比

    margin-bottom:长度|百分比

    margin-left:长度|百分比

    margin-right:长度|百分比

  border-width:元素边框的宽度,指的是元素外边框到元素内边框的距离。

  用法:

    border-width:长度

    border-top-width:长度

    border-bottom-width:长度

    border-left-width:长度

    border-right-width:长度

二、对比测试

利用控制变量法对两个div(div1、div2)进行测试,其中先给div一个初步的样式。

body{
margin:;
background-color:#80ff80;
} div{
width:100px;
height:100px;
border-width:1px;
border-color:red;
border-style:solid;
padding:;
}

1.padding内边距

#div1{
padding:;
} #div2{
padding:20px;
}

结果显示设置内边距的元素比不设置内边距的元素要大,至于大多少呢,我们继续看

#div1{
padding:;
width:140px;
} #div2{
padding:20px;
}

看来设置了padding后,元素的显示大小发生了改变,改变值就是padding的值。上例中padding-left=padding-right=20px,所以div2的显示宽度为140px。

总结:padding会改变元素的显示大小,但元素的内容大小不会改变。

2.border-width

#div1{
border-width:1px;
} #div2{
border-width:20px;
}

结果显示,边框也会影响显示结果,div2比div1会不会是大(20-1)*2=38px呢?接着测试

#div1{
border-width:1px;
width:138px;
} #div2{
border-width:20px;
}

果然如此,所以边框大小也会影响元素的显示大小,改变值正好是边框的大小之和。

3.margin

#div1{
margin:;
} #div2{
margin:20px;
}

发现位置改变了,继续测试

#div1{
margin:;
width:120px;
} #div2{
margin:20px;
}

不难发现,margin并没有改变元素的显示大小,改变的仅仅是元素相对于父元素的位置。

三、结论

显示大小=元素大小+内边距+边框大小

实际大小=元素大小+内边距+边框大小+外边距

CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系的更多相关文章

  1. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

  2. css 的包含块 、负外边距,字体,文本行高

    一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...

  3. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

  4. HTML连载38-内边距属性、外边距属性

    一.内边距属性 1.定义:边框和内容之间的距离就是内边距 2.分开写 padding-top:数字px: padding-left:数字px: padding-bottom:数字px: padding ...

  5. css使用rgba()或hsla()设置半透明或完全透明边框border

    在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性.这篇文章就简单介绍下使用这2种方式来实现半透明边框. 1.使用rgba方式: border: 10px solid rg ...

  6. CSS权威指南 - 内边距 边框 和 外边距

    九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...

  7. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  8. css细节复习笔记——内边距、边框和外边距

    一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确 ...

  9. css常用属性:居中展示、内边距、外边距

    1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...

  10. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

随机推荐

  1. FreeChart柱状图中如何取消柱子的倒影

    JFreeChart柱状图中如何取消柱子的倒影,让柱子显示为一个平面图 Render 该怎么设置呢? 问题补充:已解决 intervalBarRender.setShadowVisible(false ...

  2. 命令行翻译 推荐一个linux系统中可用的终端小程序

    程序的github地址:https://github.com/fanbrightup/fanyi 使用起来非常简单,同时支持中英文互译甚至是整句. 步骤一:首先你需要安装node,参见我的node安装 ...

  3. Redis系列五:redis键管理和redis数据库管理

    一.redis键管理 1 键重命名 rename oldKey newkey //格式rename oldKey newKey //若oldKey之前存在则被覆盖set name james :set ...

  4. pycharm 取消空格,逗号 等符号的自动补全

  5. P1649 [USACO07OCT]障碍路线Obstacle Course

    题目描述 Consider an N x N (1 <= N <= 100) square field composed of 1 by 1 tiles. Some of these ti ...

  6. jqgrid 单击行启用行编辑,切换行保存原编辑行

    为了加速表格互动编辑,我们往往希望通过选中行就触发了行编辑,完成行编辑后,再选中另一个行做编辑,同时上一个编辑行被自动保存,直至完成需要的编辑内容. 页面效果可能如下: 1)设置需要编辑的列 edit ...

  7. pv,uv的意义

    PV(page view),即页面浏览量,或点击量;通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标. 高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你网站几个页面.这里 ...

  8. 03-Centos7安装部署Mirrorgate-踩坑记录

    FAQ 1.没有安装bzip2 解决方法 yum -y install bzip2 > phantomjs-prebuilt@2.1.16 install /root/test/mirrorga ...

  9. 启动hbase shell报错:org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: Server is not running yet

    查看日志发现:Waiting for dfs to exit safe mode 这说明HDFS目前处于安全模式,需要退出才行,于是进入Namdenode节点,执行命令: hdfs dfsadmin ...

  10. 【chrome】"您的连接不是私密连接" 解决办法

    1.启用显示证书选项 在Chrome的地址栏中输入:chrome://flags/#show-cert-link,选择"启用",重启Chrome浏览器.  (操作过无用) 2.安装 ...