자바 스크립트 인라인 블록에서 공백 제거

Question

이 자바 스크립트 코드로 인라인 블록 사이의 공백을 제거하려고합니다. 내가 $('.lolers')에 $('.Container')을 설정하면

$.fn.removeSpace = function(){ 
this.contents().filter(function() { 
    return this.nodeType === 3; 
}).remove(); 
}; 
$('.Container').removeSpace(); 

<div class="Container"> 
    <div class="what"> 
    <ul class="lolers"> 
     <li class="lol">Test</li> 
     <li class="lol">Test 2</li> 
     <li class="lol">Test 3</li> 
    </ul> 
    </div> 
</div> 

공백이 제대로 스트라이프됩니다. .what으로 설정하면 스트립도 제거되지 않습니다.

편집 : 질문을 포함해서 죄송합니다. 자바 스크립트 코드를 모든 것을 통과시키고 공백을 없애려면 어떻게해야합니까?

Answer 1

편집 : font-size : 0; 메소드에는 Safari 및 Android가 있습니다. 나는이 기사를 가리켰다 http://css-tricks.com/fighting-the-space-between-inline-block-elements/

당신은 또한 그들을 블록으로 만들 수 있습니다. 여기에 내 바이올린 예제가있다.

http://jsfiddle.net/ivanjsfiddle00/a4nu8arz/6/

HTML

<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div id="second"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

CSS

div div { 
    background: #000; 
    height: 100px; 
    width: 100px; 
    display: block; 
    float: left; 
    } 

#second { 
    clear: left; 
} 

ORIGINAL POST :를 사용하는 이유 javascsript이 공백을 제거하려면? 요소를 인라인 블록으로 표시 할 때 부모 요소가 텍스트 공간을 남겨 두는 것으로 이해합니다. 기본적으로, 내가 읽은 것은 이미지가 이런 식으로 표시되고 인라인 블록이 캡션 텍스트를위한 공간을 남겨 두도록 기본 설정된다는 것입니다. 부모 요소의 font-size를 0으로 설정합니다. 여기에 내 바이올린 예제가있다.

http://jsfiddle.net/ivanjsfiddle00/a4nu8arz/2/

HTML

<div id="first"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

CSS

div div { 
    background: #000; 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
} 
    #first { 
    font-size: 0; 
}