添加边框到div增加div宽度？ [英] Add border to div increase div width?

问题描述

我有一个 div 如下，它的宽度是300px，然后我添加边框到它2px，我的问题是这是2px的边框导致的宽度 div 是302像素？

感谢

  .test {width：300px; height：auto; background-color：＃A8F9C0; float：left; border：2px solid black;}  

 < div class = test>< / div>  

解决方案

你可以使用 box-sizing 属性有两个可能的值：

1. li>
   
2. border-box

strong>默认。 width和height属性（和min / max属性）只包括内容。边框，内边距或边距均不包含

border-box 宽度和高度属性包括内容，填充和边框，但不包括边距

（ source ：W3Schools.com） p>

默认情况下，@Protectator指出，边框将添加到您的容器宽度/高度。

当您使用 border-box ：

  .test {width：300px; height：auto; background-color：＃A8F9C0; float：left; border：2px solid black; box-sizing：border-box;}  

 < div class =test> 

将确保宽度保持不变，并包含框边框。

I have a div as below, its width is 300px, then i add border to it 2px, my question is this that the 2px border cause that the the width of div be 302px?

Thanks

.test{
  width:300px;
  height:auto;
  background-color:#A8F9C0;
  float:left;
  border:2px solid black;
}

<div class="test">
</div>

解决方案

@Kaveh : What you have stumbled across is the foundation of the CSS box-model.

You can play with it using the box-sizing property which has two possible values:

1. content-box (default)
2. border-box

content-box Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

border-box The width and height properties (and min/max properties) includes content, padding and border, but not the margin

(source: W3Schools.com)

By default as @Protectator pointed out, the border will add on to your container width/height.

See what happens when you use border-box:

.test{
  width:300px;
  height:auto;
  background-color:#A8F9C0;
  float:left;
  border:2px solid black;
  box-sizing: border-box;
}

<div class="test">
</div>

This will ensure the width stays the same and inlcudes the box border.

这篇关于添加边框到div增加div宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！