[html] 인라인 블록 요소 사이의 공백은 어떻게 제거합니까?
CSS3 준수 브라우저의 경우에는 white-space-collapsing:discard
참조 : http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
주어진 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만으로 해결할 수 있습니까?
나는 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 픽셀의 차이가 있습니다. 그래서 이것이 해결책이 될 수 있다고 생각합니다.
인라인 블록 요소에서 공백을 제거하십시오. 여러 가지 방법이 있습니다.
마이너스 마진
div a { display: inline - block; margin - right: -4 px; }글꼴 크기를 0으로 설정
nav { font - size: 0; } nav a { font - size: 16 px; }닫는 태그 건너 뛰기
< ul > < li > one < li > two < li > three < /ul>
CSS 텍스트 모듈 레벨 4 사양은 요소 내부 및 주위의 공백 처리 방법을 제어 할 수 있는 text-space-collapse 속성을 정의 합니다.
그래서, 당신의 예제와 관련해서는 다음과 같이 작성하면됩니다 :
p {
text-space-collapse: discard;
}
안타깝게도 HBP 의 답변에 대한 언급에서 언급 한 것처럼이 브라우저를 아직 구현하지 않은 브라우저는 없습니다 (2016 년 9 월).
단순한:
item {
display: inline-block;
margin-right: -0.25em;
}
상위 요소를 만질 필요는 없습니다.
여기 조건 만 : 항목의 font-size는 정의되어서는 안됩니다 (부모의 font-size와 같아야합니다).
0.25em 은 기본 word-spacing
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>PHP 브래킷 사용 :
ul li {
display: inline-block;
} <ul>
<li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li>
</ul> 나는 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
갭이없는 두 개의 파란색 스팬을 만들거나 다른 공백을 처리하려는 경우 확실하지 않지만 갭을 제거하려면 다음을 수행하십시오.
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
float: left;
}
그리고 끝났어.
재미있는 일 : 쉬운 자바 스크립트 솔루션.
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> display:inline-block 위한 모든 공간 제거 기술 display:inline-block 은 불쾌한 해킹입니다 ...
Flexbox 사용
그것은 멋진데, 모든 인라인 블록 레이아웃 BS를 해결하고, 2017 년에는 98 % 브라우저를 지원합니다 (예전 IE를 신경 쓰지 않는다면 더 많은 것).
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>공백이 없도록 요소간에 주석 을 추가하십시오. 필자의 경우 글꼴 크기를 0으로 재설정 한 다음 다시 설정하는 것보다 쉽습니다.
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
불행히도, 2015 년이고 white-space-collapse 는 여전히 실행되지 않습니다.
그 동안 부모 요소 font-size: 0; 아이에게 font-size 를 설정합니다. 이 트릭을해야합니다.
이전 버전의 브라우저에서는 flexbox를 사용하고 위의 제안 사항을 따르십시오.
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html 
css