[分享]css内边框设置不占高度

CSS内边框是一种可以帮助我们美化页面样式的属性，它可以用来设置元素内部的边框。当我们设置内边框时，有时候会发现元素的高度并没有发生变化，这是因为CSS内边框不会占用元素的高度。.box{ borde...

CSS内边框是一种可以帮助我们美化页面样式的属性，它可以用来设置元素内部的边框。当我们设置内边框时，有时候会发现元素的高度并没有发生变化，这是因为CSS内边框不会占用元素的高度。

.box{
  border: 1px solid #000;
  padding: 10px;
} 

在上面的代码中，我们给一个class名为“box”的元素设置了1像素的边框和10像素的内边距。虽然设置了内边距，但是元素的高度并没有发生变化，这是因为内边距不会占用元素的高度。如果我们想要让元素的高度也发生变化，可以考虑使用box-sizing属性来解决。

.box{
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
} 

在上面的代码中，我们添加了box-sizing属性，并将属性值设置为border-box。这样做可以让元素的内边距和边框占用元素的总宽度，而不会让它们超出元素盒子的宽度。这个属性对大多数浏览器都有良好的支持，所以可以放心使用。

综上所述，CSS内边框不会占用元素的高度。如果想要让元素的高度也随之改变，可以考虑使用box-sizing属性来解决。