CSS中可以使用padding属性为HTML元素设置内边距,但是在设置内边距的时候,很容易导致元素的大小发生变化。那么如何设置内边距不改变元素大小呢?/* 设置内边距不改变元素大小 */ box-si
CSS中可以使用padding
属性为HTML元素设置内边距,但是在设置内边距的时候,很容易导致元素的大小发生变化。那么如何设置内边距不改变元素大小呢?
/* 设置内边距不改变元素大小 */ box-sizing: border-box; padding: 20px;
以上代码中,box-sizing: border-box
属性将元素的内边距和边框包含在元素的宽度和高度之内,这样设置内边距的时候就不会改变元素的大小了。然后再设置padding: 20px
即可给元素设置20px的内边距。
另外,还有一个快捷方式可以简写以上代码:
/* 快捷设置内边距不改变元素大小 */ padding: 20px; box-sizing: border-box;
以上代码和第一个示例代码的效果是一样的。
总结来说,如果需要为元素设置内边距但不想改变元素的大小,只需要将box-sizing
属性设置为border-box
即可。另外,box-sizing
属性的默认值是content-box
,如果不设置此属性或将此属性设置为content-box
,设置内边距时会改变元素的大小。
粉丝
0
关注
0
收藏
0