[전송] 인라인 블록 요소 사이의 간격을 제거하는 N 가지 방법

Zhang Xinxu-Xin Space-Xin Life에서 [http://www.zhangxinxu.com]

1. 현상설명

인라인 블록의 진정한 의미에서 줄 바꿈이나 공백으로 구분되어 표시되면 가로로 표시되는 요소 사이에 간격이 생깁니다. 아주 간단한 예:

<input> <input type="submit">

간격은 요~~

CSS를 사용하여 인라인 블록이 아닌 수평 요소를 인라인 블록 수평 요소로 변경하면 이 문제도 발생합니다.

<span style="color: #000000;">.space a {
    display: inline</span>-<span style="color: #000000;">block;
    padding: .5em 1em;
    background</span>-<span style="color: #000000;">color: #cad5eb;
}
</span><div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

여기를 클릭하세요: 요소 사이의 인라인 블록 간격 데모

이런 성능은 사양에 맞춰야 합니다(누군가가 버그라고 생각한다면 그건 ()에이()오이).

그런데 이런 간격이 레이아웃이나 호환성 처리에 영향을 미치는 경우가 있습니다. 어떻게 해야 할까요? N가지 방법이 아래에 나와 있습니다(추가를 환영합니다)!

2. 공백 제거 방법

요소 사이에 공백이 있는 이유는 태그 세그먼트 사이에 공백이 있기 때문입니다. 따라서 HTML에서 공백을 제거하면 자연스러운 공백이 발생하지 않습니다. 코드의 가독성을 고려하면 한 줄로 작성하는 것은 바람직하지 않습니다.

<div class="space">
    <a href="##"><span style="color: #000000;">
    惆怅</span></a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

또는:

<div class="space">
    <a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>

또는 HTML 주석을 사용하세요.

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

잠깐.

3. 음수 여백 값을 사용하세요

.space a {
    display: inline-block;
    margin-right: -3px;
}

음수 여백 값의 크기는 컨텍스트의 글꼴 및 텍스트 크기와 관련이 있습니다. 해당 간격 크기 값은 이전 기사 "디스플레이 기반 목록 레이아웃:"의 6부에 있는 통계표에서 확인할 수 있습니다. 인라인 블록":

예를 들어 컨텍스트 크기가 12픽셀인 경우 Arial 글꼴의 margin 음수 값은 -3픽셀이고, Tahoma 및 Verdana는 -4픽셀이고, Geneva는 -6픽셀입니다.

외부 환경의 불확실성과 마지막 요소의 추가 상위 마진 값으로 인해 이 방법은 대규모 사용에는 적합하지 않습니다.

4. 닫힌 라벨이 캡슐을 먹게 하세요

다음과 같이 처리됩니다.

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

IE6/IE7 및 Mengniu에서 성장한 다른 브라우저와의 하위 호환을 위해 마지막 목록 태그의 닫는(닫는) 태그가 손실될 수 없다는 점에 유의하세요.

HTML5에서는 다음을 직접 수행합니다.

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

그래, 좀 이상한 느낌이 들더라도 괜찮습니다.

여기를 클릭하세요: 인라인 블록 요소 간격 데모를 제거하기 위한 닫는 태그 없음

5. 글꼴 크기:0을 사용하세요

다음과 유사한 코드:

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

이 방법은 기본적으로 대부분의 브라우저에서 인라인 블록 요소 사이의 간격을 해결할 수 있습니다(IE7 및 기타 브라우저에서는 때때로 1픽셀 간격을 가집니다). 하지만 기본적으로 최소 글꼴 크기 제한이 있는 브라우저가 있습니다. 호환성을 고려하여 다음 코드와 유사한
도 추가해야 합니다.

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

您可以狠狠地点击这里（去年制作的一个简单demo）：font-size:0清除换行符间隙demo

补充：根据小杜在评论中中的说法，目前Chrome浏览器已经取消了最小字体限制。因此，上面的-webkit-text-size-adjust:none;代码估计时日不多了。

六、使用letter-spacing

类似下面的代码：

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

根据我去年的测试，该方法可以搞定基本上所有浏览器，包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。

七、使用word-spacing

类似下面代码：

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

您可以狠狠地点击这里：word-spacing与元素间距去除demo

与上面demo一样的效果，这里就不截图展示了。如果您使用Chrome浏览器，可能看到的是间距依旧存在。确实是有该问题，原因我是不清楚，不过我知道，可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。

.space {
    display: inline-table;
    word-spacing: -6px;
}

八、其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

以下是一个名叫RayM的人提供的方法：

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}

也就是上面一系列CSS方法的组组合合。