html display inline-block - 인라인 블록 요소 사이의 공백은 어떻게 제거합니까?
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만으로 해결할 수 있습니까?
공백이 없도록 요소간에 주석 을 추가하십시오. 필자의 경우 글꼴 크기를 0으로 재설정 한 다음 다시 설정하는 것보다 쉽습니다.
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
display:inline-block
위한 모든 공간 제거 기술 display:inline-block
은 불쾌한 해킹입니다 ...
Flexbox 사용
그것은 멋진데, 모든 인라인 블록 레이아웃 BS를 해결하고, 2017 년에는 98 % 브라우저를 지원합니다 (예전 IE를 신경 쓰지 않는다면 더 많은 것).
- 우리는 Flexbox를 사용할 준비가되어 있습니까?
- Flexbox Flexbox
- Flexbox에 대한 완벽한 안내서 | CSS 트릭
- Flexy Boxes - CSS flexbox 놀이터 및 코드 생성 도구
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 이상에서 거의 작동합니다.
이전 버전의 브라우저에서는 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
나는 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>