css让padding、border不占据宽度
在CSS中,如果你想让一个元素的padding
和border
不影响它的宽度,你可以使用box-sizing
属性。默认情况下,box-sizing
的值是content-box
,这意味着元素的宽度和高度只包括content
,不包括padding
和border
。
要实现你的需求,你可以将box-sizing
设置为border-box
,这样padding
和border
就会被包含在宽度和高度之内。
下面是一个例子:
.element {
width: 200px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box; /* 这样设置后,padding和border就会被包含在宽度内 */
}
在这个例子中,.element
类的元素将拥有200px的宽度,但由于box-sizing
的值为border-box
,10px
的padding
和5px
的border
将会被包含在200px宽度内,所以实际内容的可用宽度将会是200px减去(10px + 5px + 5px) * 2
,即170px。
评论已关闭