Problem mit Leerzeichen im Inline-Block-HTML-Tutorial-php.cn

Problem mit Leerzeichen im Inline-Block

WBOY

Freigeben： 2016-08-10 08:49:39

Original

1185 Leute haben es durchsucht

1. Problem

Wenn das Element das Inline-Block-Attribut hat, gibt es eine leere Lücke

2. Lösung

1) Entfernen Sie die Lücken zwischen den Elementen

<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>

Nach dem Login kopieren

2) Lassen Sie das schließende Tag

weg

<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>

Nach dem Login kopieren

2. CSS-Methode

1. Verwenden Sie negative Randwerte (Rand-Rechts-Werte können in verschiedenen Browsern unterschiedlich sein)

<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>;
}

Nach dem Login kopieren

2. Schriftgröße: 0 (IE7 hat eine Lücke von 1 Pixel)

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

Nach dem Login kopieren

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

Nach dem Login kopieren

3. Negativer Buchstabenabstandswert (der Mindestabstand im Opera-Browser beträgt 1 Pixel, der Buchstabenabstand wird wiederhergestellt, wenn er kleiner ist)

<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>;
}

Nach dem Login kopieren

4. Negative Wortabstände

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

Nach dem Login kopieren

<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>;
}

Nach dem Login kopieren

Inline-Block und Baseline

https://segmentfault.com/a/1190000002668492