problem with width:50% when border != none (CSS)

Question

problem with width:50% when border != none

take a look http://jsfiddle.net/5nYSf/

result should be like this

Answer 1

你可以将两个元素放在50％宽的彼此旁边，然后你可以在每个元素里面放置一个边距和边框： http ： //jsfiddle.net/5nYSf/47/

Answer 2

If your borders are a fixed width you could substract the border lenght from your element width using the calc() function in your CSS.

.attachments {
height:80px;    
background-color:#E4E4E4;
}

.attachments span {
float:left;
height:100%;
width:calc(50% - 6px);
background-color:#9FB9CA;
border:3px #879AA8 solid;
}

http://jsfiddle.net/5nYSf/277/

Answer 3

The trick is, border and margin are not included in height/width calculation. So, if you have element with width 100px, border 2px and left margin 10px, the 114px of horizontal space will be taken up. (Border is counted twice: left and right.) IIRC, padding is not included too, but I'm not sure about that.

There're several options to solve this. You can have width:49% on both elements or width:50% on first and make second to take up the rest.
If both elements must take exactly equal space, you can include each in its own div . Those divs will have no border/margin/padding and take up exactly 50% of space and border will be specified on inner element.

The last method in action:
http://jsfiddle.net/5nYSf/35/

Answer 4

There is a easy way: add { box-sizing: border-box; } in .attachments and the 50% width will contain the border too

Answer 5

Border is in addition to the defined width, so 50% + 50% + 3px border (on both sides) ends up being 100% + 12px, which is 12px bigger than the containing element (100%). Try using 49% or some other measurement that will leave 12px for the border.

Answer 6

不要忘记考虑这些边距（显示浅灰色区域）并且你不能使用高度：100％因为你不能使用宽度的原因：50％（如其他人所述）

Answer 7

the border expands the box.

50% + border > 50%

you have to decrease the width:

.attachments {
    height:80px;    
    background-color:#E4E4E4;
}

.attachments span {
    display:inline-block;
    height:100%;
    width:48%;
    background-color:#9FB9CA;
    border:3px #879AA8 solid;
}