Geringer Weißraum zwischen Inline-Elementen?

Ich weiß, dass wenn Sie Inline-Block-Elemente verwenden, Sie unerwünschten Leerraum bekommen.Geringer Weißraum zwischen Inline-Elementen?

Aber warum in diesem Beispiel haben diese zwei Inline-Link-Elemente einen kleinen Abstand zwischen ihnen?

Sie können sehen, sie sind in zwei Zeilen und wenn ich sie nebeneinander und entfernen Sie den Raum in meinem Texteditor der Raum ist dann weg, aber sicherlich sollte es den Raum in meinem Texteditor ignorieren?

Dies hat Platz zwischen den Links.

<body> 
    <a href="#">link 1</a><a href="#">Link 2</a> 
</body>

Dies nicht.

Danke.

https://jsfiddle.net/hfgjwj55/

Quelle

2016-10-20 Joe Consterdine

Enthält diese nur in der jsfiddle geschehen? oder auch in deinem eigenen Projekt. jsfiddles platziert den Code in einen iframe, der einige seltsame Probleme verursachen könnte –

Hi Robbin, nein, das passiert auch auf meinem lokalen. –

Dies liegt daran, wenn Sie eine beliebige Anzahl von Leerzeichen in HTML-Code platzieren wird es ein Leerzeichen umgewandelt werden.

<body> 
     <a href="#">link 1</a> 
     <a href="#">Link 2</a> 
    </body

Neue Linie wird ein Raum zwischen zwei Elementen hinzufügen. also entweder sein ein Raum oder ein Vielfaches würde es als ein weißer Raum zwischen zwei Elementen betrachtet werden.

<body> 
    <a href="#">link 1</a> <a href="#">Link 2</a> 
</body>`

beide oben genannten Fall wird ein Raum zwischen ihm haben. während unten Code jeden Raum nicht zwischen

<body> 
    <a href="#">link 1</a><a href="#">Link 2</a> 
</body

wenn Sie mehrere Leerzeichen verwenden   wie folgt erhalten wird: eine Menge Zeit als gut

<body> 
    <a href="#">link 1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Link 2</a> 
</body

Quelle

2016-10-20 09:41:56

Dies war ein Problem für mich.

ich in der Regel immer löst es so: https://jsfiddle.net/g7h0fbyn/

<a href="#">link 1</a><!-- 
--><a href="#">Link 2</a>

Es ist schon eine Frage zu diesem auf Stackoverflow, mit einer wirklich netten Antwort, sollten Sie sie überprüfen: How to remove the space between inline-block elements?

Quelle

2016-10-20 09:43:03 jogoe

Das ist für Inline-Blockelemente, ich meinte Inline-Elemente. –

Dies gilt sowohl für Inline- als auch für Inline-Block-Elemente. – jogoe

Der Browser doesn Den Unterschied sehen, in dem Whitespace gesucht wird und was nicht; Alle Leerzeichen werden zu einem einzelnen Leerzeichen zusammengeführt (sofern nicht anders durch pre und dergleichen spezifiziert).

Abgesehen von der Entfernung des Leerraums in Ihrem Quellcode, ist eine mögliche (wenn auch knifflige) Lösung, font-size global auf 0 zu setzen und für bestimmte Elemente zurückzusetzen.

Eine andere Möglichkeit ist es, die Leerzeichen wie dies auszukommen:

<a href="#">link 1</a> 
<a href="#">Link 2</a>

Obwohl das ein bisschen chaotisch sein kann.

Es gibt Möglichkeiten, dieses Problem insgesamt zu vermeiden, wie die Verwendung Flexbox, aber das ist wahrscheinlich zu viel für Ihr Beispiel.

Quelle

2016-10-20 09:44:43 Andii

Wenn Sie eine neue Linie zwischen zwei Elementen eingeben, wird ein Leerzeichen zwischen ihnen eingefügt.

<body> 
    <a href="#">link 1</a> 
    <a href="#">Link 2</a> 
</body>

Die oben und die unten sind die gleichen,

<body> 
    <a href="#">link 1</a> <a href="#">Link 2</a> 
</body>

Wenn Sie alle Leerzeichen oder eine neue Zeile nicht gegeben haben, dann wird es kein Raum zwischen den Elementen sein.

Auch wenn Sie zwei Leerzeichen zwischen den Elementen wie unten angeben, wird es mit nur einem Leerzeichen gerendert.

<body> 
    <a href="#">link 1</a> <a href="#">Link 2</a> 
</body>

Also, wenn Sie mehr als einen Platz benötigen haben Sie   wie unten zu verwenden.

<body> 
    <a href="#">link 1</a>&nbsp;&nbsp;<a href="#">Link 2</a> 
</body>

Quelle

2016-10-20 09:45:14

Prost. Ich mag deine Erklärung. –

@JoeConsterdine Cool :-) –

-1

Sie können einen Rand hinzufügen, um den Leerraum zu entfernen.

a{ 
margin-left:-4px; 
}

Quelle

2016-10-20 09:46:32

Sie sollten es wirklich nicht so formatieren. – jogoe

Dies funktioniert nicht zuverlässig für verschiedene Schriftarten und Schriftgrößen. – Andii

Es gibt verschiedene Optionen, white-space von angezeigt zu werden vermeiden, in Ihrem Beispiel könnten Sie:

Display die a-Tags als Inline-Block und schweben sie links https://jsfiddle.net/hfgjwj55/3/
```
a { 
    display: inline-block; 
    float: left; 
} 
```
Schriftgröße auf dem Wrapper (in diesem Fall der Körper) 0 und die Schriftgröße der a-Tags auf z 16px https://jsfiddle.net/hfgjwj55/2/
```
body { 
    font-size: 0; 
} 

a { 
    font-size: 16px; 
} 
```
put html Kommentare zwischen den Elementen

Quelle

2016-10-20 10:33:29

Geringer Weißraum zwischen Inline-Elementen?

Antwort

Verwandte Themen