divs를 올바르게 정렬하십시오.

Question

올바르게 정렬하려면 div가 제대로 표시되지 않습니다 (div가 4 개의 50px div가 200px 컨테이너에 완벽하게 맞춰 지도록 div가 필요합니다), 여백이나 여백이없는 요소에도 불구하고 항상 공백이 있습니다. .

JSFiddle의 내부와 외부에서 크롬과 파이어 폭스를 사용해 보았습니다.

http://jsfiddle.net/JF6xS/39/

HTML :

<div id="prev">PREV</div> 
    <div id="next">NEXT</div> 

    <div id="slides"> 
     <div class="offset-parent"> 
      <div class="images">1</div> 
      <div class="images">2</div> 
      <div class="images">3</div> 
      <div class="images">4</div> 
      <div class="images">5</div> 
      <div class="images">6</div> 
      <div class="images">7</div> 
      <div class="images">8</div> 
      <div class="images">9</div> 
      <div class="images">10</div> 
      <div class="images">11</div> 
      <div class="images">12</div> 
      <div class="images">13</div> 
      <div class="images">14</div> 
      <div class="images">15</div> 
      <div class="images">16</div> 
      <div class="images">17</div> 
      <div class="images">18</div> 
      <div class="images">19</div> 
      <div class="images">20</div> 

     </div> 
    </div>  

CSS :

body{ 
white-space:nowrap; 
margin: 0px 
} 

.images{ 
position:relative; 
height: 100%; 
width: 50px; 
display: inline-block; 
padding: 0px; 
box-sizing: border-box; 
border:1px solid red; 
margin: 0px; 
} 

#prev{ 
position:fixed; 
top:20px; 
left:0px; 
cursor: pointer; 
} 

#next{ 
position:fixed; 
top:0px; 
left:0px; 
cursor: pointer; 
} 

.offset-parent { 
position: relative; 
width: 200px; 
} 

#slides { 
position: relative; 
top:50px; 
overflow: auto; 
height: auto; 
width: 200px; 
overflow: hidden; 
} 

Answer 1

인라인 - 블록이 (오히려 순수한 블록 요소보다는 이미지에 비슷한 방식으로 행동하고있다 div가 기본값이므로) div 사이의 간격을 볼 수 있습니다.

공간은 단어 사이의 간격처럼 작동합니다.

div 사이의 공백을 삭제하거나 인라인 블록이 아닌 각 블록을 만들어 왼쪽으로 떠날 수 있습니다.

Answer 2

항상 인라인 블록 요소가있는 4px 오른쪽면이 있습니다. 이유는 묻지 말고 그램 핑의 문법으로 돌아갑니다. 그것을 제거하는 두 가지 방법 :

• 0으로 HTML 요소 사이에 부모의
• 설정 글꼴 크기를 공백을 제거하고 명시 적으로 내가 처음 선호하는 하위 요소

의 폰트 크기 설정 방법은 매우 간단 사촌 구현하는 미래의 CSS 변경을 중단하지 않습니다

 <div class="images"> 
      1 
     </div><div class="images"> 
      2 
     </div><div class="images"> 
      3 
     </div><div class="images"> 

기타 등 더 많은 정보를 원한다면,이 article is a great resource on the topic. 나는 모든 HTML 포맷 싶지 않았다 때문에 주로

UPDATE는

나는 updated your jsFiddle의 font-size:0 트릭을 사용하지만, 또한 내가 위에 제공된 수정과 같은 결과를 제공하기 때문이다.

Answer 3

.images에는 기본적으로 공백이있는 display:inline-block;이 있기 때문입니다. 그것을 충당하기 위해서는 두 가지 선택이 있습니다. 먼저 하나는이

.images{ 
margin-left:-4px; 
} 

같은 부정적인 여백을 추가하거나 block에 display inline-block을 변경하고 float left;를 추가 할 수 있습니다.

Answer 4

div 사이의 줄 바꿈은 HTML 결과의 공백 인 공백으로 해석됩니다.

divs를 float : left로 설정하는 것이 좋습니다. 이것들 사이에 공백이 제거됩니다.