왜 내 DIV 오른쪽에 작은 여백이 나타 납니까?

나는 586px 너비의 큰 DIV를 가지고있다. 이 안에 두 개의 더 작은 DIV가 있는데, 둘 다 266px 너비입니다.왜 내 DIV 오른쪽에 작은 여백이 나타 납니까?

페이지를 미리 볼 때 그 사이에 약간의 여백이 있습니다. 요소 검사로이 문제를 해결하려고했지만 메트릭에 여분의 여백이 없습니다.

screengrab from Safari

CSS의 :

#category-results { width: 586px; height: 1000px; background-color: fuchsia; }

.category-item-full { height: 158px; width: 266px; background-color: green; position: relative; display: inline-block; margin: 0px; }

html로 :

<div id="category-results">

    <div class="category-item-full"> 
        </div> 

        <div class="category-item-full"> 
        </div>

당신이 당신의 div의 사이에 빈 공백이 있기 때문에

</div>

2012-02-28 Olly F

인라인 블록입니까? HTML 소스의 div 태그 사이에 공백이나 개행 문자가 있습니까? 그렇다면 문제가 있습니다. – BoltClock

전체 HTML 및 CSS를 게시하십시오 –

그냥 CSS와 HTML을 추가했습니다. 감사합니다. –

CSS에서 display: inline-block;을 삭제하십시오.
또는 당신이 그것을 필요로하는 경우에, HTML에서 <div>의 사이의 공백을 제거합니다

<div class="category-item-full"> 
</div><div class="category-item-full"> 
</div>

2012-02-28 19:43:55

아, 알았어. 'Inline-block'은 공백을 파싱하는 것입니다. 이렇게하면 새로운 문제가 발생합니다. ''인라인 블록 '을 제거하면 내 작은 DIV가 서로 나란히 앉아있는 대신 전체 행을 차지합니다. 인라인 블록을 사용하지 않고 어떻게 해결할 수 있습니까? –

네, 정확히 말했듯이 말입니다. 이 문제를 해결하려면 * css floating *에 대한 인터넷 검색을 시도하십시오. –

이 있습니다. 그들을 조이고 멀리 간다. Example jsFiddle.

2012-02-28 19:43:53 j08691

해보십시오 CSS 재설정. 시작하려면 다음과 같이하십시오 : CSS Tools: Reset CSS. 그리고, Google에 "CSS 재설정"을 해보십시오. 마지막으로 tuts+ network이 매우 유용합니다.

2012-02-28 19:49:54 ThisIsNotAnId

display: inline-block을 제거하고 float: left으로 바꾸어보세요. 작동하는 것처럼 보이며 "인라인 블록"과 달리 표준 CSS입니다.

2012-02-28 19:59:08 gcbenison

그게 효과가있어, 고마워. –

답변