백분율로 정의 된 경우 픽셀 단위로 너비를 줄이는 방법

Question

너비가 각각 25% 인 네 개의 요소가 있습니다. 그들은 페이지의 너비를 완벽하게 채 웁니다.

나는 각각 1px 간격을 넣고 싶습니다. 이렇게하면 (예 : margin-right: 1px;) 마지막 요소가 다음 줄로 오버플로됩니다. 각 픽셀의 폭을 픽셀 단위로 계산하지 않고 각 요소의 너비를 1px까지 줄이려면 어떻게해야합니까?

Answer 1

난 그냥 코멘트에 @Lubnah의 도움으로, 솔루션 나 자신을 발견했다.

.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

너비는 컨테이너 내부에서 계산됩니다. 패딩이나 마진을 너비에 추가합니다.

은 23 %로 폭을 설정하고 1 %로 이익률은

왼쪽 여백 (1) 플러스 폭 (23) 플러스 페이지에 네 번 배치 (1) = 25 그건 오른쪽 여백을 추가 할 것 (100)

Answer 3

에 당신은 CSS calc를 사용할 수 있지만 브라우저 지원은 스케치입니다 :

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

Answer 4

당신은 폭 자동차와 여백 오른쪽으로 각 요소 내부에 내부 사업부를함으로써 약간의 속임수 수 : 1 픽셀의

이 바이올린을 참조하십시오 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

사용 box-sizing: border-box;와 국경을.

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

}

Answer 6

사용 상자 크기 box-sizing:border-box 와 배경으로 같은 색으로 1 픽셀의 오른쪽 테두리를 사용하는 등

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