padding 后尺寸变化设置_padding margin border 和元素大小

元素占用宽度 = 元素宽度+padding+border+margin

注意margin只是隔开元素，不会使得元素变大，而padding会使得元素变大，也就是说

元素真实宽度=元素宽度+padding+border

border 在元素的外层

一、关于Padding

1、设置对象四边的内边距。默认值是0。

2、如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

3、如果只提供一个，将作用于全部的四边。

4、如果提供两个，第一个作用于上、下，第二个作用于左、右。

5、如果提供三个，第一个作用于上，第二个作用于左、右，第三个作用于下。

6、内联对象要使用该属性，必须先设定对象的height或width属性(在样式表中将width和height写在padding前面即可)，或者设定position属性为absolute。不允许负值。

7、内边距留白处总是透明的，并且设置内边距会直接影响对象的大小。

提示：

(1)设置了padding属性就相当于增加了对象的大小。原宽270px，高175px，设置padding:30px 0 0

40px后对象的大小应该是宽为310px，高为205px，要想保持原大小就必须减去相应的宽高。所以，对象的宽是270-40=230px，高是

175-30=145px。

(2)padding是不具有继承性的。

(3)padding属性是可以分别设置的。padding-top、padding-right、padding-bottom、padding-left分别作用于上、右、下、左四边。语法和参数和padding的设置相同。

二、关于margin

(1)设置对象四边的外边距。默认值是0。

(2)如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

(3)如果只提供一个，将作用于全部的四边。

(4)如果提供两个，第一个作用于上、下，第二个作用于左、右。

(5)如果提供三个，第一个作用于上，第二个作用于左、右，第三个作用于下。

(6)内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

(7)外边距总是透明的，并且设置外边距不会直接影响对象的大小，只是相对位置发生变化。

提示：

(1)margin属性不具有继承性。由于IE的双边距BUG会往往导致内联对象设置边距后与父对象左边的距离实际值不符，遇到这样的问题就加display:inline;，意思是把对象视作行级元素。

(2)设置内联对象的上下边距是不会出现双边距问题的。margin不具有继承性，内联对象设置左右边距时出现双倍边距完全是IE的BUG。

(3)margin属性是可以分别设置的。margin-top、margin-right、margin-bottom、margin-left分别作用于上、右、下、左四边。

padding 后尺寸变化设置_padding margin border 和元素大小相关推荐

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将 ...
解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
前言: 有时候我们需要子div和父div一样宽(高),但是需要设置一定边距时,如果子元素使用width:100%在设置padding或margin的话,就会出现溢出问题. HTML <div c ...
图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
CSS padding margin border属性讲解
把所有网页上的对象都放在一个盒(box)中 ,设计师可以通过创建定义来控制这个盒的属性,这些对象包括段落.列表.标题.图片以及层. 盒模型主要定义四个区域: 内容(content) 内边距(paddi ...
CSS的Padding, Margin, Border 的区别
HTML的元素 HTML语言定义了一系列的标签元素, 比如div, hr , ul , a 等等.粗略来分, 有以下几种类型: 块状元素: 以块的形式显示一个矩形区域, 可以定义自己的高度和宽度, 可 ...
html左右超出显示滚动条,div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？...
div内容宽度超出边界后怎样设置为左右滑动,而且不显示滚动条? 纯手写滚动条隐藏掉就行了 CSS: *{ margin:0px;padding:0px; } .wrap{ overflow: hid ...
在html中设置外边距,CSS外边距设置属性margin用法
本文向大家描述一下CSS外边距属性margin的用法,设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位.百分数值甚至负值,相信本文介绍一定会让你有所收获. CSS外边距围绕 ...
layui时间怎么设置年月日时分秒_安卓手机便签敬业签到时间提醒后怎么设置延时30分钟再提醒?...
现在越来越多的网友开始使用敬业签来记事.设置待办事项提醒了,并且我们在敬业签中设置的待办事项提醒,不仅支持通过软件的弹窗和声音提醒,还支持通过微信.钉钉.短信.语音来电.日历(安卓)等方式同步提醒待办 ...
uefi装完系统后无法引导_系统安装完后再设置uefi启动 - 卡饭网
Windows8系统安装完后无法上网的解决办法 Windows8系统安装完后无法上网的解决办法现在有不少用户反映安装Win8后无法联网的问题,这个问题很大程度是网卡驱动导致的,那该怎么办呢,只能是重 ...

padding 后尺寸变化设置_padding margin border 和元素大小

padding 后尺寸变化设置_padding margin border 和元素大小相关推荐

最新文章

热门文章

padding 后尺寸变化 设置_padding margin border 和元素大小

padding 后尺寸变化 设置_padding margin border 和元素大小相关推荐

最新文章

热门文章

padding 后尺寸变化设置_padding margin border 和元素大小

padding 后尺寸变化设置_padding margin border 和元素大小相关推荐