html display inline-block - 인라인 블록 요소 사이의 공백은 어떻게 제거합니까?





15 Answers

CSS3 준수 브라우저의 경우에는 white-space-collapsing:discard

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

정렬 css 폰트

주어진 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 솔루션을 원했다.

자바 스크립트로 이것을 해결하는 방법을 알고있다. 다음과 같이 컨테이너 요소 (단락)에서 텍스트 노드를 제거한다. 

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

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

하지만이 문제는 CSS만으로 해결할 수 있습니까?



공백이 없도록 요소간에 주석 을 추가하십시오. 필자의 경우 글꼴 크기를 0으로 재설정 한 다음 다시 설정하는 것보다 쉽습니다. 

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


display:inline-block 위한 모든 공간 제거 기술 display:inline-block 은 불쾌한 해킹입니다 ...

Flexbox 사용

그것은 멋진데, 모든 인라인 블록 레이아웃 BS를 해결하고, 2017 년에는 98 % 브라우저를 지원합니다 (예전 IE를 신경 쓰지 않는다면 더 많은 것).



CSS 텍스트 모듈 레벨 3 에 기반한 두 가지 옵션 ( white-space-collapsing:discard 대신 명세서 초안에서 white-space-collapsing:discard 된 white-space-collapsing:discard ) :

  • word-spacing: -100%;

이론 상으로는 필요로하는 것을 정확히해야합니다. 공백 문자 폭의 100 % 즉 '0'사이의 공백을 '0'으로 줄입니다. 그러나 불행히도 어디서나 작동하지 않는 것처럼 보입니다.이 기능은 위험한 상태로 표시됩니다 (사양에서 삭제 될 수도 있음).

  • word-spacing: -1ch;

그것은 단어 '0'의 너비에 의해 단어 간 공간을 단축합니다. 고정 폭 글꼴에서는 공백 문자 (및 다른 문자도 마찬가지)의 너비와 정확하게 동일해야합니다. Firefox 10 이상, Chrome 27 이상에서 작동하며 Internet Explorer 9 이상에서 거의 작동합니다.

Fiddle



이전 버전의 브라우저에서는 flexbox를 사용하고 위의 제안 사항을 따르십시오. 

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


단순한: 

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

상위 요소를 만질 필요는 없습니다.

여기 조건 만 : 항목의 font-size는 정의되어서는 안됩니다 (부모의 font-size와 같아야합니다).

0.25em 은 기본 word-spacing

W3Schools - 단어 간격 속성



나는 font-size:0; 에서이 문제를 지금 font-size:0; 나는 Internet Explorer 7에서 "Internet Explorer가"Font Size 0?!?! WTF는 당신이 미쳤다고 생각하기 때문에 문제가 남아 있다는 것을 알았습니다. " - 그래서, 제 경우에는 Eric Meyer의 CSS 재설정과 font-size:0.01em; 인터넷 익스플로러 7에서 파이어 폭스 9까지 1 픽셀의 차이가 있습니다. 그래서 이것이 해결책이 될 수 있다고 생각합니다.



갭이없는 두 개의 파란색 스팬을 만들거나 다른 공백을 처리하려는 경우 확실하지 않지만 갭을 제거하려면 다음을 수행하십시오. 

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

    float: left;
}

그리고 끝났어. 



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>



PHP 브래킷 사용 : 

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



이 질문에 대한 가장 간단한 대답은 추가하는 것입니다.

CSS 

float: left;

codepen link : http://jsfiddle.net/dGHFV/3560/



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 있습니다.



재미있는 일 : 쉬운 자바 스크립트 솔루션. 

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}
span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}
<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>



letter-spacing:-4px; 추가 letter-spacing:-4px; 부모 p CSS 및 letter-spacing:0px; 추가 letter-spacing:0px; 당신의 span CSS에. 

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>



inline-block 사이의 공간을 제거하려고하는 모든 질문은 나에게 <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>



Share

Twitter   Facebook

Related


Tags

html   css