Heim > Artikel > Web-Frontend > Wie entferne ich den Abstand zwischen Inline-Block-Elementen in CSS? (mehrere Methoden)
Wie entferne ich den Abstand zwischen Inline-Block-Elementen in CSS? (mehrere Methoden)
- 不言nach vorne
- 2019-04-04 11:56:232958Durchsuche
In diesem Artikel geht es darum, wie man den Abstand zwischen Inline-Block-Elementen in CSS entfernt. (Mehrere Methoden), es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Phänomenbeschreibung
Im wahrsten Sinne des Wortes entsteht eine Lücke zwischen Elementen, die horizontal im Inline-Block angezeigt werden, wenn sie in Zeilenumbrüchen oder durch Leerzeichen getrennt angezeigt werden. Dies liegt daran, dass der Browser sie analysiert , was dazu führt, dass Zeilenumbrüche usw. als Leerzeichen gelesen werden.
2. So entfernen Sie Leerzeichen
Wir können Zeilenumbrüche und Leerzeichen zwischen Elementen entfernen, sodass die Abstände auf natürliche Weise verschwinden. Dies verringert jedoch die Lesbarkeit des Codes und ist nicht ratsam.
<div>
<a href="">
链接1</a><a href="">
链接2</a><a href="">
链接3</a><a href="">
链接4</a>
</div>
<div>
<a href="">链接1</a
><a href="">链接2</a
><a href="">链接3</a
><a href="">链接4</a>
</div>
<div>
<a href="">链接1</a><!--
--><a href="">链接2</a><!--
--><a href="">链接3</a><!--
--><a href="">链接4</a>
</div>Negative Randwerte verwenden. Aufgrund externer Unsicherheitsfaktoren und des Problems des zusätzlichen negativen Randwerts des letzten Elements wird diese Methode jedoch nicht empfohlen.
<style>
a {
background: pink;
display: inline-block;
padding: .5em 1em;
margin: -3px;
}
</style>
<body>
<div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a>
</div>
</body>③ Stellen Sie „font-size:0“ auf das übergeordnete Element ein und legen Sie dann unsere Schriftgröße im untergeordneten Element fest, wodurch auch der Abstand zwischen Elementen entfernt werden kann.
<style>
div{
font-size: 0;
}
a{
font-size: 16px;
background: pink;
}
</style>
<div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a>
</div>④ Löschen Sie das schließende Tag.
<div>
<a href="">链接1
<a href="">链接2
<a href="">链接3
<a href="">链接4
</div>⑤ Verwenden Sie Buchstabenabstände.
<style>
div{
letter-spacing: -6px;
}
a{
letter-spacing: 0;
background: pink;
}
</style>
<div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a>
</div>⑥ Verwenden Sie Wortabstände.
<style>
div{
word-spacing: -6px;
}
a{
word-spacing: 0;
background: pink;
}
</style>
<div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
<a href="">链接4</a>
</div>[Verwandte Empfehlungen: CSS-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonWie entferne ich den Abstand zwischen Inline-Block-Elementen in CSS? (mehrere Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!