内边距

在一般情况下,你说的都是对的,因为按css2.1的标准,block元素的宽(width)和高(height)是指元素实际内容(不包括内边距和边框的宽度)的宽和高,因此如果加了padding或border,整个盒子的尺寸就会被撑大。
但是,css3增加了一个盒子属性叫box-sizing,它的值如果是“content-box”,就是以内容(content)为盒子的范围,这个跟css2.1的标准是一样的,而如果是“border-box”,就是以边框(border)为盒子的范围,这也就是说,在这种情况下,width=内容的width+padding+border,如果width的值固定,增加padding或border宽度,则内容的宽度就会自动缩小,而整个盒子的外观尺寸是不会变化的(这个就跟低版本的IE因为没有符合css2.1标准而歪打正着的盒子效果是差不多的,但IE的不包括border)。但是当padding大于width时,盒子的尺寸仍然会被撑破的,这也就是“对于block元素,padding值设置大于盒子宽度,一定会影响元素尺寸”这个说法的由来。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值