인라인 / 인라인 블록 요소 사이의 공백을 어떻게 제거합니까?


1066

이 HTML과 CSS가 주어지면 :

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

결과적으로 SPAN 요소 사이에 4 픽셀 너비의 공간이 생깁니다.

데모 : http://jsfiddle.net/dGHFV/

왜 이런 일이 발생하는지 이해하고 HTML 소스 코드에서 SPAN 요소 사이의 공백을 제거하여 해당 공간을 제거 할 수 있음을 알고 있습니다.

<p>
    <span> Foo </span><span> Bar </span>
</p>

그러나 HTML 소스 코드를 변경하지 않아도되는 CSS 솔루션을 원했습니다.

컨테이너 요소 (단락)에서 텍스트 노드를 제거하여 JavaScript 로이 문제를 해결하는 방법을 알고 있습니다.

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

데모 : http://jsfiddle.net/dGHFV/1/

그러나 CSS만으로이 문제를 해결할 수 있습니까?


지금 관련 옵션을 모두 보려면이 질문에 대한 답변을 참조하십시오 : stackoverflow.com/questions/14630061/…
ktamlyn


답변:


1006

이 답변이 다소 인기를 얻었으므로 크게 다시 작성하고 있습니다.

요청 된 실제 질문을 잊지 마십시오.

인라인 블록 요소 사이의 공간을 제거하는 방법은 무엇입니까? HTML 소스 코드를 변경하지 않아도되는 CSS 솔루션을 원했습니다. CSS만으로도이 문제를 해결할 수 있습니까?

이다 혼자 CSS에이 문제를 해결할 수 있지만이없는 완전히 강력한 CSS의 수정.

첫 번째 대답에서 얻은 해결책 font-size: 0은 부모 요소 에 추가 한 다음 font-size어린이들에게 현명한 것을 선언하는 것이 었 습니다.

http://jsfiddle.net/thirtydot/dGHFV/1361/

이것은 모든 최신 브라우저의 최신 버전에서 작동합니다. IE8에서 작동합니다. Safari 5 에서는 작동 하지 않지만 Safari 6 에서는 작동합니다. Safari 5는 거의 죽은 브라우저입니다 ( 0.33 %, 2015 년 8 월 ).

상대적 글꼴 크기로 가능한 대부분의 문제는 해결하기가 복잡하지 않습니다.

그러나 CSS 전용 수정 사항이 필요한 경우 합리적인 솔루션 이지만 HTML을 자유롭게 변경할 수있는 경우 권장하지 않습니다 (대부분의 경우).


이것은 합리적으로 숙련 된 웹 개발자로서 실제로이 문제를 해결하기 위해 수행하는 작업입니다.

<p>
    <span>Foo</span><span>Bar</span>
</p>

네 맞습니다. 인라인 블록 요소 사이의 HTML에서 공백을 제거합니다.

그것은 간단합니다. 간단 해. 어디에서나 작동합니다. 실용적인 솔루션입니다.

공백이 어디에서 오는지 신중하게 고려해야 할 때가 있습니다. JavaScript로 다른 요소를 추가하면 공백이 추가됩니까? 아니요, 제대로하면 안됩니다.

몇 가지 새로운 HTML을 사용하여 공백을 제거하는 여러 가지 방법으로 마술 여행을 떠나 봅시다.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • 평소처럼 이렇게 할 수 있습니다.

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • 아니면 이거:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
  • 또는 주석을 사용하십시오.

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
  • 또는 PHP 또는 이와 유사한 것을 사용하는 경우 :

    <ul>
        <li>Item 1</li><?
        ?><li>Item 2</li><?
        ?><li>Item 3</li>
    </ul>
  • 또는, 당신은 할 수 도 건너 뛸 특정 (모든 브라우저이 괜찮 있습니다) 완전히 닫는 태그 :

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>

이제 "삼백 점씩 공백을 제거하는 천 가지 방법"으로 당신을 죽이고 지루해 하셨기를 바랍니다 font-size: 0.


또는 flexbox사용 하여 이전에 인라인 블록으로 사용했을 수있는 많은 레이아웃을 얻을 수 있습니다. https://css-tricks.com/snippets/css/a-guide-to-flexbox/


7
FF3.6, IE9RC, O11, Ch9에서 작동합니다. 그러나, 사파리 5에서 여전히 1 픽셀의 격차가 남아있다:(
SIME VIDAS

7
@thirtydot 이 답변 의 의견을 확인하실 수 있습니다 . 이 font-size:0트릭은 결국 좋은 생각이 아닐 수 있습니다 ...
Šime Vidas

25
나는 포스터가 CSS 솔루션을 찾고 있다는 것을 알고 있지만,이 솔루션은 가장 많이 투표 된 (30 투표 대 5 작성)-부작용이 강하고 크로스 브라우저에서도 작동하지 않습니다. 이 시점에서 HTML에서 문제가되는 공백을 제거하는 것이 더 실용적입니다.
Steph Thirion

10
이 솔루션은 컨테이너 크기에 대해 EM으로 작업하지 않는 경우에만 작동합니다.
meo

6
이로 인해 상대적 글꼴 크기의 하위 요소가 분리됩니다.
Daniel

156

CSS3 호환 브라우저에는 white-space-collapsing:discard

참조 : http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing


trim-inner오히려 사용하고 싶지 discard않습니까?
spb

49
이것은 텍스트 레벨 3에서 제거되었지만 텍스트 레벨 4는 입니다. 이미 2016 년이며 여전히 지원되지 않습니다. text-space-collapse:discard
Oriol

1
@MrLister : 다른 솔루션은 모든 경우에 작동하지 않습니다. 예를 들어 <p>A long text...</p>시작 및 종료 태그가 텍스트 내용과 별도의 줄에있는 에서 후행 공백을 제거하는 솔루션에 대해서는 모르겠습니다 . HTML 파일을 깔끔하고 읽기 쉽게 유지하기 위해 항상하는 일입니다.
Robert Kusznier

@Robertfloat
Mr Lister

@MrLister Floating은 실제로 후행 공간을 제거하지만 심각한 부작용이 있습니다-컨테이너 레이아웃에서 요소의 위치를 ​​완전히 변경합니다. 요소를 플로팅 할 때 레이아웃이 손상되면 어떻게해야합니까 (보통 경우)?
Robert Kusznier

94

편집하다:

오늘은 Flexbox 만 사용해야 합니다 .


오래된 답변 :

좋아, 대답 font-size: 0;not implemented CSS3 feature대답을 모두 상향 조정했지만 시도한 후에 그들 중 어느 것도 실제 해결책이 아니라는 것을 알았습니다 .

실제로 부작용이 없으면 해결 방법이 하나도 없습니다.

그런 다음 소스 ( ) 에서 div 사이 의 공백을 제거하기로 결정했습니다 ( ).inline-blockHTMLJSP

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

이에

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

그것은 추악하지만 작동합니다.

그러나, 잠깐 ... 내가 안에 내 div가 발생하고있어 경우 어떻게 Taglibs loops( Struts2, JSTL, 등 ...)?

예를 들면 다음과 같습니다.

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

모든 것을 인라인하는 것은 절대 생각할 수 없습니다.

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

읽을 수없고, 관리하기 어렵고 이해하기 어려운 등

내가 찾은 해결책 :

HTML 주석을 사용하여 한 div의 끝을 다음 div의 시작에 연결하십시오!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

이렇게하면 읽기 쉽고 올바르게 들여 쓰기 된 코드를 갖게됩니다.

그리고 긍정적 인 부작용으로 HTML source, 비록 빈 의견에 의해 감염 되었음에도 불구하고 올바르게 들여 쓰기 될 것이다.

첫 번째 예를 보자. 내 겸손한 견해로는 다음과 같습니다.

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

이것보다 낫다 :

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

1
이로 인해 편집기에서 코드 접기 기능이 손상 될 수도 있습니다.
jknotek

44

공백이 없도록 요소 사이에 주석 을 추가하십시오 . 나를 위해 글꼴 크기를 0으로 재설정 한 다음 다시 설정하는 것이 더 쉽습니다.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

이것은 우리가 2020 년에 사용하지 말아야 할 해킹입니다 : 대신 flexbox를 사용하십시오 caniuse.com/#feat=flexbox
tonygatta

flexbox는이 질문에 대한 답변이 아니지만 역시 효과가 있습니다. stackoverflow.com/a/37512227/1019850
David

42

에 대한 모든 공간 제거 기술 display:inline-block은 거친 해킹입니다 ...

Flexbox 사용

대단하고이 인라인 블록 레이아웃을 모두 해결하고 2017 년 기준으로 98 %의 브라우저 지원을 제공합니다 (이전 IE에 신경 쓰지 않는다면 더 많은 것).


1
불쾌한 해킹이 발생할 수 있지만 font-size : 0은 브라우저의 100 %에서 작동하며 표시를 적용합니다. inline-flex는 여전히 지원하지 않는 브라우저에서도 추가 공백을 제거하지 않습니다!
패트릭

@ Patrick Flexbox는 문제를 확실히 해결합니다. 실제로 잘못하고 있습니다. 인라인 플렉스는 플렉스 항목을 인라인으로 표시하기위한 것이 아니라 컨테이너에만 적용됩니다. 참조 stackoverflow.com/a/27459133/165673
Yarin

7
100 % 브라우저 에서는 "font-size : 0" 작동 하지 않습니다 . (최소 글꼴 크기 브라우저 설정). 이 답변은 정말 좋습니다.
ViliusL

35

더하다 display: flex;부모 요소에 . 접두사가있는 솔루션은 다음과 같습니다.

간체 버전 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


접두사 👇으로 수정

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


1
좋은 답변입니다! 그러나 단순화 된 버전을 맨 위에 놓는 것이 깔끔하다고 생각하므로 독자가 가장 먼저 보게됩니다. 또는 단순화되지 않은 버전을 제거 할 수도 있습니다.
Stefnotch

1
@Stefnotch Done ✅ 귀중한 제안에 감사드립니다 :-)
Mo.

31

이것은 관련하여 준 대답과 같습니다. 표시 : 인라인 블록-그 공간은 무엇입니까?

실제로 인라인 블록에서 공백을 제거하는 쉽고 간단한 방법이 쉽고 의미가 있습니다. 너비가 0 인 공백이있는 사용자 정의 글꼴이라고하며 매우 작은 글꼴을 사용하여 글꼴 수준에서 공백 (인라인 요소가 별도의 줄에있을 때 브라우저에 추가)을 축소 할 수 있습니다. 글꼴을 선언하면 font-family컨테이너 에서 를 변경 하고 하위 및 다시 다시 변경하십시오 . 이처럼 :

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

맛에 맞게. 다음은 방금 폰트 위조에서 요리하고 FontSquirrel 웹 글꼴 생성기로 변환 한 글꼴에 대한 다운로드입니다. 5 분만 걸 렸어요 CSS @font-face선언은 다음과 같습니다 : 압축 된 0 너비 공백 글꼴 . Google 드라이브에 있으므로 파일> 다운로드를 클릭하여 컴퓨터에 저장해야합니다. 선언을 기본 CSS 파일로 복사하는 경우 글꼴 경로를 변경해야 할 수도 있습니다.


1
나는 당신이 생각하는 CSS 트릭에 이것을 게시하는 것을 보았습니다 . 그리고 이것은 대답입니다. 가볍고 구현하기 쉽고 브라우저 간 (내 테스트에서 보여지는 한)입니다. Firefox가 flex-wrap적어도 v28 ( srsly? ) 까지 지원하지 않는다는 것을 알기 전까지는 flexbox를 완전히 사용 했지만 그때까지는 완벽한 폴백입니다.
indextwo

16
이것은 내가 오랫동안 본 과잉의 최악의 경우입니다. 공백을 제거하기 위해 전체 글꼴을 다운로드 하시겠습니까? 이런.
Mr Lister

3
@MrLister 당신은 그러한 글꼴 파일이 작은 것임을 알고 있습니까? 내부의 글리프가 없습니다. 어쨌든 base64로 인코딩하여 요청을 제거한다고 주장합니다.
Robert Koritnik

아이콘 글꼴과 같은 치명적인 결함이 있습니다. 즉, 웹 글꼴이 차단되거나 (예 : 대역폭 또는 보안상의 이유로) 사용자 지정 글꼴로 덮어 쓰여지면 (예 : 난독증과 같은 건강상의 원인으로 인해) 작동하지 않습니다.
tomasz86

22

CSS 텍스트 모듈 레벨 3 을 기반으로 한 두 가지 옵션 ( white-space-collapsing:discard사양 초안에서 삭제되지 않은 옵션 ) :

  • word-spacing: -100%;

이론적으로, 그것은 필요한 것을 정확하게 수행해야한다- '단어'사이의 공백을 공백 문자 너비의 100 %, 즉 0으로 줄이십시오. 그러나 불행히도 어디서나 작동하지 않는 것 같습니다.이 기능은 '위험에 처한'것으로 표시됩니다 (사양에서도 떨어질 수 있음).

  • word-spacing: -1ch;

단어 간격을 숫자 '0'의 너비만큼 줄입니다. 모노 스페이스 글꼴에서는 공백 문자 (및 다른 문자)의 너비와 정확히 같아야합니다. 이것은 Firefox 10 이상, Chrome 27 이상에서 작동하며 Internet Explorer 9 이상에서 거의 작동합니다.

깡깡이


단어 간격의 경우 +1이지만 -0.5ch가 올바른 값이지만 공백이없는 -1ch 텍스트는 읽을 수 없으며 -0.5ch는 글꼴 크기와 동일하게 작동합니다. 0; 텍스트 요소에 명시적인 설정 크기. :)
Dennis98

6
(택배 새로운처럼)에만 고정 폭 글꼴 작동 -1ch Dennis98, @, 모든 문자가 포함 동일한 폭을 가지고 있기 때문에 ' '그리고 '0'. 모노 스페이스가 아닌 글꼴에서는 너비 ' ''0'문자 사이에 적합한 마법 비율 ch이 없으므로 전혀 도움이되지 않습니다.
Ilya Streltsyn

대신 word-spacing, 우리는 사용할 수 letter-spacing에서와 같이 임의의 큰 음의 값으로 내 대답
S.Serpooshan

20

불행히도 2019 년이며 white-space-collapse여전히 구현되지 않았습니다.

그 동안 부모 요소를 제공 하고 자식을 font-size: 0;설정하십시오 font-size. 이 트릭을해야합니다


16

이전 브라우저에서 flexbox를 사용하고 위의 제안에서 폴백을 수행하십시오.

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

13

단순한:

item {
  display: inline-block;
  margin-right: -0.25em;
}

부모 요소를 만질 필요가 없습니다.

여기서 만 조건 : 항목의 글꼴 크기를 정의해서는 안됩니다 (부모의 글꼴 크기와 같아야 함).

0.25em 기본값입니다 word-spacing

W3Schools-단어 간격 속성


0.25em은 "기본 단어 간격"이 아니며 Times New Roman 글꼴의 공백 문자 너비로 일부 인기있는 OS에서 기본 글꼴로 사용됩니다. Helvetica와 같은 다른 인기있는 글꼴은 종종 더 넓은 공백 문자를 가지므로 0.25em 만 제거하면 공백을 제거하기에 충분하지 않습니다.
Ilya Streltsyn

12

글꼴 크기 : 0; 관리하기가 조금 까다로울 수 있습니다 ...

다음 몇 줄은 다른 방법보다 훨씬 더 좋고 재사용 가능하며 시간을 절약한다고 생각합니다. 나는 개인적으로 이것을 사용합니다 :

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

그런 다음 다음과 같이 사용할 수 있습니다 ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

내가 아는 한 (잘못되었을 수도 있지만) 모든 브라우저 가이 방법을 지원합니다.

설명 :

이것은 예상대로 작동합니다 (-3px가 더 좋을 수도 있음).

  • 코드를 복사하여 붙여 넣기 (한 번)
  • 그런 다음 html class="items"에서 각 인라인 블록의 부모에서 사용하십시오 .

새로운 인라인 블록에 대해 CSS로 돌아가서 다른 CSS 규칙을 추가 할 필요가 없습니다.

한 번에 두 가지 문제를 해결합니다.

또한 >(/보다 큼) 이것은 * / 모든 자식이 인라인 블록이어야 함을 의미합니다.

http://jsfiddle.net/fD5u3/

참고 : 래퍼에 자식 래퍼가있을 때 문자 간격을 상속하도록 수정했습니다.


대신 -4pxletter-spacing큰 글꼴 크기에있는 충분하지 될 수있다 이 바이올린을 참조하십시오 예를 들면 , 우리가 같이 큰 값을 사용할 수 있습니다 내 게시물
S.Serpooshan

12

기술적으로 "인라인 블록 요소 사이의 공백을 어떻게 제거합니까?"라는 질문에 대한 대답은 아닙니다.

flexbox 솔루션을 사용 해보고 아래 코드를 적용하면 공간이 제거됩니다.

p {
   display: flex;
   flex-direction: row;
}

이 링크에서 자세한 내용을 확인할 수 있습니다 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/


하지만 기술적으로 하지 "나는 인라인 블록이 작업을 수행 할 수 있습니다"에 대한 답변이 나에게 보인다 ... 우아한 해결책이 될 수 있습니다
루카스

10

간격없이 두 개의 파란색 범위를 만들거나 다른 공백을 처리 하려는지 확실하지 않지만 간격을 제거하려는 경우 :

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

그리고 끝났다.


9

일반적으로 우리는 다른 라인에서 이와 같은 요소를 사용하지만 display:inline-block같은 라인에서 태그 를 사용 하는 경우 공백을 제거하지만 다른 라인에서는 그렇지 않습니다.

다른 줄에 태그가있는 예 :

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

같은 줄에 태그가있는 예

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>


또 다른 효율적인 방법은 font-size:0부모 요소에 사용하고 font-size원하는만큼 자식 요소에 제공 하는 CSS 작업입니다 .

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

위의 방법은 전체 응용 프로그램에 따라 어딘가에서 작동하지 않을 수 있지만 마지막 방법은이 상황에 대한 완벽한 솔루션이며 어디에서나 사용할 수 있습니다.


이 방법의 단점은 기본 글꼴 크기 (예 : 14px)를 알고 반복하여 자식 요소에서 다시 정상으로 설정해야한다는 것입니다!
S.Serpooshan

8

나는 지금이 문제가 있었고 font-size:0;Internet Explorer 7에서 Internet Explorer가 "Font Size 0?!?! WTF는 미친 사람?" -제 경우에는 Eric Meyer의 CSS를 재설정 font-size:0.01em;했으며 Internet Explorer 7에서 Firefox 9와 1 픽셀의 차이가 있으므로 이것이 해결책 일 수 있다고 생각합니다.


7

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>


1
이 코드 스 니펫은 문제를 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자들에게 질문에 대한 답변을 제공하므로 해당 사람들이 코드 제안의 이유를 모를 수도 있습니다. 설명 주석으로 코드를 복잡하게 만들지 마십시오. 이렇게하면 코드와 설명의 가독성이 떨어집니다!
Ashish Ahuja

내가 추측 float하고 display:inline-block대한 span경우, 경우에 대한 폴백 (fallback)이 될 수밖에 없었던의 flex지원되지 않지만 float효과의 영향을 폐기 할 inline-block후자는 중복 것, 그래서.
Ilya Streltsyn

6

최근에 이것을 다루었 고 부모 font-size:0를 설정 한 다음 자녀를 합리적인 가치로 다시 설정하는 대신 부모 컨테이너 letter-spacing:-.25em를 설정 한 다음 자식을 다시 설정하여 일관된 결과를 얻었 습니다.letter-spacing:normal .

다른 스레드에서 나는 논평자가 언급 한 것을 보았다. font-size:0 에서 사람들이 브라우저에서 최소 글꼴 크기를 제어 할 수 있으므로 글꼴 크기를 0으로 설정할 가능성을 완전히 무시할 수 있기 때문에 항상 이상적인 것은 아닙니다.

ems를 사용하면 지정된 글꼴 크기가 100 %, 15pt 또는 36px인지에 관계없이 작동하는 것으로 보입니다.

http://cdpn.io/dKIjo


Android 용 Firefox에서는 상자 사이에 1px의 공백이 있습니다.
Šime Vidas

5

IE 6/7에서도 모든 브라우저에서 지원되는 매우 간단하고 오래된 방법이 있다고 생각합니다. letter-spacing부모에서 단순히 큰 음수 값으로 설정 한 다음 normal자식 요소로 다시 설정할 수 있습니다.

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


여기서 일어나는 동일한 일이 letter-spacing:normal모든 자식 요소 에 설정 되어야합니다.
Gaurav Aggarwal

@GauravAggarwal하지만 letter-spacing99.99 %의 시간 normal입니다. 글꼴 크기는 고정 된 값이 아니며 디자인에 따라 크게 달라집니다. font-family 및 기타 것들을 기반으로 작은 값 또는 큰 값 일 수 있습니다 ... 나는 인생에서 특별한 값 (0 / normal 이외의)을 보거나 사용하는 것을 기억하지 letter-spacing않으므로 더 안전하다고 생각합니다. 더 나은 choise
S.Serpooshan

나는 이것에 동의하지 않습니다 ... 모든 요소에서 문자 간격을 정상으로 사용하고 글꼴 크기를 사용하는 것 (필요한 경우)을 사용하면 글꼴 크기를 변경 해야하는 이중 코드를 작성하는 데 전혀 유용하지 않습니다. 글꼴 크기를 사용하면 이중 코드를 만들 수 없으며 표준 크기 및 기타 사용자 정의 크기로 사용할 수 있습니다. 요즘 Google에서 글꼴 크기를 사용하여 확인하는 것이 가장 좋습니다. 해결 방법 : 시간 변경
Gaurav 가르 왈에게

난 당신이 무슨 뜻인지 이해할 수 없다 "UR은 유 글꼴 크기를 변경해야하는 이중 코드를 작성하는 모든 유용에 있지 ... 그리고 (필요한 경우) 너무 글꼴 크기를 사용하여." 내 게시물에는 글꼴 크기 설정이 없습니다! 내가 한 것은 보통 그의 CSS에 아무도 넣지 않은 문자 간격입니다 (항상 정상입니다). 우리는 글꼴 크기를 변경하지 않기 때문에 원래 글꼴 크기를 알 필요가 없습니다.
S.Serpooshan

이 방법은 Opera / Presto에서 작동하지 않기 때문에 이전에는 인기가 없었던 것 같습니다. 그리고 현재 우리는 인라인 블록 대신 Flexbox를 사용하는 것과 같은 이러한 대안이 필요없는 다른 옵션을 가지고 있습니다.
Ilya Streltsyn


3

PHP 괄호 :

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


2

나는 다른 솔루션이 너무 복잡하거나 너무 많은 작업이라고 생각하기 때문에 user5609829의 답변을 조금 확장 할 것입니다. margin-right: -4px인라인 블록 요소에 a 를 적용 하면 간격이 제거되고 모든 브라우저에서 지원됩니다. 여기 에서 업데이트 된 바이올린을 참조 하십시오 . 음수 여백 사용에 관심 있는 분은이 내용을 읽어보십시오.


4
사용자가 브라우저의 기본 글꼴 크기를 변경하면 작동하지 않습니다. 더 나은 사용 -0.25em.
마틴 슈나이더


1

모든 브라우저에서 나를 위해 잘 작동하는 순수한 CSS 솔루션을 찾았습니다.

span {
    display: table-cell;
}

이 질문은 인라인 블록에 관한 것입니다.
Madan Bhandari

@MadanBhandari는 정확하지만 모든 더러운 핵의 필요성을 제거하는 것으로 보입니다.
데이비드

1

white-space: nowrap컨테이너 요소에 추가하십시오 .

CSS :

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML :

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

여기입니다 Plunker은 .


플로터가 없으면 플로트가 없으면 작동하지 않습니다. 따라서 "white-space : nowrap"은 제대로 작동하지 않는 것 같습니다.
데이비드

1

많은 솔루션이 같다 font-size:0, word-spacing, margin-left,letter-spacing 등이.

일반적으로 내가 사용하는 것을 선호 letter-spacing하기 때문에

  1. 여분의 공간 너비보다 큰 값을 할당하면 괜찮아 보입니다 (예 : -1em .
  2. 그러나, 그것은 괜찮되지 않습니다 word-spacing그리고 margin-left우리는 같은 더 큰 값을 설정하는 경우-1em .
  3. 사용은 font-size우리가 사용하려고 할 때 편리하지 않습니다 em으로 font-size단위.

그래서, letter-spacing 최선의 선택 것 같습니다.

그러나 나는 당신에게 경고해야합니다

당신이 사용할 때 당신 letter-spacing은 다른 사람을 더 잘 사용 -0.3em하거나 -0.31em하지 않았다.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}
<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Chrome (테스트 버전 66.0.3359.139) 또는 Opera (테스트 버전 53.0.2907.99)를 사용하는 경우 다음과 같은 내용이 표시 될 수 있습니다.

여기에 이미지 설명을 입력하십시오

Firefox (60.0.2), IE10 또는 Edge를 사용하는 경우 다음과 같은 내용이 표시 될 수 있습니다.

여기에 이미지 설명을 입력하십시오

그 흥미 롭군요. 그래서 mdn-letter-spacing 을 확인하고 이것을 찾았습니다.

길이

문자 사이의 기본 공백 외에 추가 문자 간 공백을 지정합니다. 값은 음수 일 수 있지만 구현 별 제한이있을 수 있습니다. 사용자 에이전트는 텍스트를 정당화하기 위해 문자 간 공간을 더 늘리거나 줄일 수 없습니다.

이것이 이유 인 것 같습니다.


1

추가 letter-spacing:-4px;부모에 pCSS를 추가합니다 letter-spacing:0px;당신에 spanCSS.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>


1

현재 제공되는 많은 답변이 적절하고 관련성이 높지만 모든 브라우저에서 완벽하게 지원하고 거의 모든 출력을 지원하는 매우 깨끗한 출력을 얻을 수있는 새로운 CSS 속성이 있으므로이 질문에 새로운 것을 추가 할 것이라고 생각했습니다. '해킹'이 없습니다. 이것은 멀어 inline-block지지만 질문과 동일한 결과를 제공합니다.

이러한 CSS 속성은 grid

CSS 그리드는 IE를 제외하고 고도로 지원됩니다 ( CanIUse ).-ms- 되며, 작동 접두사 있으면됩니다.

CSS Grid는 또한 매우 유연 table하며 flex, 및 inline-block요소 에서 모든 좋은 부분을 가져와 한 곳으로 가져옵니다.

를 만들 때 grid행과 열 사이의 간격을 지정할 수 있습니다. 기본 간격은 이미0px 있지만 원하는대로이 값을 변경할 수 있습니다.

약간 짧게 자르려면 관련 작업 예를 들어보십시오.

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}
<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>


display:grid요소 의 내용 이 차단되도록 언급하면 그냥 표시되지 않습니다. 그리드를 사용하면 인라인 블록 레이아웃으로 작업하는 데 도움이되지만 inline-block'거터'를 제어 할 수있는 것으로 대체 할 수 있습니다 이 질문은 원합니다. 또한 지금까지 아무도 CSS 그리드 레이아웃 솔루션으로 응답하지 않은 것에 놀랐습니다.
TylerH

이 변경 사항을 더 명확하게 만들 것입니다 inline-block. 그리고 그래, 나도 놀랐다. grid경험이있는 사람은 아무도 전에 이것에 실제로 오지 않았다고 생각한다 . 그것으로 조금 장난이 질문 건너 온 적이 그렇게 생각 왜 안 : P
Stewartside

0

내가 찾은 또 다른 방법은 행의 첫 번째 요소를 제외하고 margin-left를 음수 값으로 적용하는 것입니다.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

0

모든 질문, 그 사이의 공간을 제거하려고 inline-blocks 의 은 마치 <table>나에게 보입니다 .

다음과 같이 해보십시오 :

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.