문자 간격으로 div가 이동하는 것 같습니다.

Question

div 모양의 테이블과 같은 클러스터를 설계하고 있습니다. 단 두 행이 있습니다.

은 "테이블"은 다음과 같이 구축되어

<div class="artist_meta_first_row"> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
</div> 
<div class="artist_meta_second_row"> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
</div> 

상당히 간단 하죠? 자, 여기 스타일은 다음과 같습니다

.artist_meta_first_row{ 
     text-transform: uppercase; 
     padding-bottom: 40px; 
     font-family: futura-pt, sans-serif; 
     font-weight: 100; 
     letter-spacing: 3px; 
    } 

     .artist_meta_first_row div{ 
     display: inline-block; 
     min-width: 190px; 
     } 

.artist_meta_second_row div{ 
     display: inline-block; 
     min-width: 190px; 
     vertical-align: top; 
     } 

내가 가진 문제는 첫 번째 행에있는 div의 텍스트가 두 번째 행의 div의 텍스트보다 더 오른쪽에 조금 더 시작이다. 첫 번째 행에 패딩이 남아 있지만 CSS 코드에는없는 것처럼 보입니다. 그래서 많은 시행 착오 끝에 첫 번째 행에 letter-spacing: 3px;이 있다는 것을 알았습니다. 첫 번째 행의 div가 조금 더 넓어서 첫 번째와 두 번째 행의 셀이 정렬되지 않은 것처럼 보입니다. 글쎄, 비록 내가 폭을 지정했다.

문자 간격을 없애지 않고 두 행을 올바르게 정렬 할 수있는 방법이 있습니까?

Answer 1

두 행의 각 div에 대한 너비를 지정 했으므로 문자 간격이 첫 행의 div의 너비에서 벗어난 세 개의 픽셀을 뺍니다. 이제 첫 번째 행과 두 번째 행에서 열의 시작 부분이 올바르게 정렬되었습니다.

이

는 작업 코드 :

.artist_meta_first_row{ 
     text-transform: uppercase; 
     padding-bottom: 40px; 
     font-family: futura-pt, sans-serif; 
     font-weight: 100; 
     letter-spacing: 3px; 
    } 

     .artist_meta_first_row div{ 
     display: inline-block; 
     min-width: 182px; /* notice 185 - 3 = 182 */ 
     } 

     .artist_meta_second_row div{ 
     display: inline-block; 
     min-width: 185px; 
     vertical-align: top; 
     } 

Answer 2

정확히이 일을 복사 - 붙여 넣기, 수정해야합니다 :

는

<div class="artist_meta_first_row"> 
    <div>some text</div><div> 
    some text</div><div> 
    some text</div><div> 
    some text</div><div> 
    some text</div> 
</div> 
<div class="artist_meta_second_row"> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
    <div>some text</div> 
</div>​ 

데모 : How do I remove extra margin space generated by inline blocks?