[html] 인라인 블록 요소 사이의 공백은 어떻게 제거합니까?


Answers

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

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

Question

주어진 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만으로 해결할 수 있습니까?



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

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


인라인 블록 요소에서 공백을 제거하십시오. 여러 가지 방법이 있습니다.

  1. 마이너스 마진 

    div a {
    display: inline - block;
    margin - right: -4 px;
}

  2. 글꼴 크기를 0으로 설정 

    nav {
    font - size: 0;
}
nav a {
    font - size: 16 px;
}

  3. 닫는 태그 건너 뛰기 

    < ul >
    < li > one
    < li > two
    < li > three
< /ul>


불행히도, 2015 년이고 white-space-collapse 는 여전히 실행되지 않습니다.

그 동안 부모 요소 font-size: 0; 아이에게 font-size 를 설정합니다. 이 트릭을해야합니다.



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

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


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

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>



나는 font-size: 0 해결책을 React와 Sass 의 비슷한 문제에 대해 현재 시도하고있는 무료 코드 캠프 프로젝트에 사용해 보았습니다.

그리고 그것은 작동합니다!

첫째, 스크립트 : 

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

그런 다음 Sass : 

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px


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>



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>



단순한: 

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

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

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

0.25em 은 기본 word-spacing

W3Schools - 단어 간격 속성



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

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

    float: left;
}

그리고 끝났어.



나는 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 픽셀의 차이가 있습니다. 그래서 이것이 해결책이 될 수 있다고 생각합니다.



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

Flexbox 사용

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



CSS 텍스트 모듈 레벨 4 사양은 요소 내부 및 주위의 공백 처리 방법을 제어 할 수 있는 text-space-collapse 속성을 정의 합니다.

그래서, 당신의 예제와 관련해서는 다음과 같이 작성하면됩니다 : 

p {
  text-space-collapse: discard;
}

안타깝게도 HBP 의 답변에 대한 언급에서 언급 한 것처럼이 브라우저를 아직 구현하지 않은 브라우저는 없습니다 (2016 년 9 월).



PHP 브래킷 사용 : 

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



Share

Twitter   Google+   Facebook  

Links


Tags

html html   css css