인라인 블록 공백 문제-HTML 튜토리얼-php.cn

인라인 블록 공백 문제

WBOY

풀어 주다： 2016-08-10 08:49:39

원래의

1186명이 탐색했습니다.

1. 문제

inline-block 속성이 있는 경우 공백이 발생합니다

2. 해결방법

1) 요소 사이의 공백 제거

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="space"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">>A</span><span style="color: #0000ff"></</span><span style="color: #800000">a
    </span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">B</font></span><span style="color: #0000ff"></</span><span style="color: #800000">a
    </span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">C</font></span><span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

로그인 후 복사

2) 닫는 태그 생략

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="space"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">A</font></span><span style="color: #000000">
    </span><span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">B</font></span><span style="color: #000000">
    </span><span style="color: #0000ff"><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="##"</span><span style="color: #0000ff">><font color="#000000">C</font></span><span style="color: #0000ff"></</span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

로그인 후 복사

2. CSS 방식

1. 음수 여백 값을 사용하세요. (여백 오른쪽 값은 브라우저마다 다를 수 있습니다.)

<span style="color: #800000">.space a </span>{<span style="color: #ff0000">
    display</span>:<span style="color: #0000ff"> inline-block</span>;<span style="color: #ff0000">
    margin-right</span>:<span style="color: #0000ff"> -3px</span>;
}

로그인 후 복사

2. 글꼴 크기: 0(IE7에서는 1px 간격이 있음)

<span style="color: #800000">.space </span>{<span style="color: #ff0000">
    font-size</span>:<span style="color: #0000ff"> 0</span>;

로그인 후 복사

}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
    font-size</span>:<span style="color: #0000ff"> 12px</span>;
}

로그인 후 복사

3. 음수 문자 간격 값(Opera 브라우저의 최소 간격은 1픽셀이며, 더 작으면 문자 간격이 복원됩니다.)

<span style="color: #800000">.space </span>{<span style="color: #ff0000">
    letter-spacing</span>:<span style="color: #0000ff"> -3px</span>;
}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
    letter-spacing</span>:<span style="color: #0000ff"> 0</span>;
}

로그인 후 복사

4. 단어 간격 음수 값

<span style="color: #800000">.space </span>{<span style="color: #ff0000">
    display：inline-table；(为了兼容Chrome)</span>

로그인 후 복사

<span style="color: #ff0000">    word-spacing</span>:<span style="color: #0000ff"> -6px</span>;
}<span style="color: #800000">
.space a </span>{<span style="color: #ff0000">
    word-spacing</span>:<span style="color: #0000ff"> 0</span>;
}

로그인 후 복사

인라인 블록과 기준선

https://segmentfault.com/a/1190000002668492