How to reduce the width of an element per pixel, if it is defined as a percentage

Question

I have four elements, each of which has a width of 25% . They perfectly fill the page width.

I want to put a 1px space between them. If I do this ( margin-right: 1px; for example), the last element will overflow on the next line. How to reduce the width of each element by 1px without calculating the width in pixels in the first place?

Answer 1

I just found a solution myself, using @Lubnah in the comments.

 .tab-list li { margin-right: -1px; border-left: 1px solid #fff; } .tab-list li:first-of-type { border-left: none; margin-right: 0px; } 

Answer 2

You can use CSS calc , but its browser support is sketchy:

 width: calc( 25% - 1px ); width: -moz-calc( 25% - 1px ); width: -webkit-calc( 25% - 1px ); 

Answer 3

Width is calculated inside the container. Any padding or fields that you set will be added to the width.

Set the width to 23% and the margin to 1%

Left margin (1) plus width (23) plus right margin (1) = 25. The fact that four times on the page will contain up to 100.

Answer 4

You can fool slightly by specifying an inner div inside each element with a width of auto and margin-right: 1px

See this script: http://jsfiddle.net/7R6zZ/

 <div class="outer"> <div class="inner">1</div> </div> <div class="outer"> <div class="inner">2</div> </div> <div class="outer"> <div class="inner">3</div> </div> <div class="outer"> <div class="inner">4</div> </div> .outer { width:25%; float:left; } .outer .inner { width:auto; margin-right:1px; background:#999; min-height:300px; } 

Answer 5

Use box-sizing: border-box; and borders.

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } div { width: 25%; border-right: 1px solid right; 

}

Answer 6

use the window size as box-sizing:border-box and use the 1px right border with the same color as the background

  .box{ width:25%; box-sizing:border-box; border-right: 1px solid "same color as your background" }