Inhaltsverzeichnis
回复讨论(解决方案)
Heim Web-Frontend HTML-Tutorial 元素换行产生空白间隙问题_html/css_WEB-ITnose

元素换行产生空白间隙问题_html/css_WEB-ITnose

Jun 24, 2016 pm 12:05 PM
元素 换行 空白 Lücke

(1)两个元素,其中一个是块级元素,则一定会换行,换行后,上下两个元素之间会产生空白间隙行
(2)两个都是行内元素,但是行内元素的宽度超过父元素的宽度则自动换行,换行后,上下两个元素之间会产生空白间隙行

我想知道这个空白间隙行产生的原因及解决方法,哪位大神知道的,给小弟讲解下,不甚感激。


回复讨论(解决方案)

应该是浏览器的默认样式。
firebug观察下元素的样式?
一般css开头重置样式表,加入 margin:0;padding 0;啥的,去掉默认的margin和padding

其实类似这样的问题,完全可以去避免,最头疼的就是明知不可为而为之
1)既然实现的效果不再一排显示,那么你完全可以两个块级元素,或者 浮动后设置宽度也行
2)子级超出父级,本身就带有兼容性问题,且在IE6下会撑开父级,你可以设置overflow:hidden

另外 显示为 diplay:inline-block;的元素,同排显示,代码换行会被解析,也就是所谓的空白间隙,没什么解决方案,就是浮动,你可以把浮动理解为升级版的 diplay:inline-block;

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Umgang mit Leerzeichen beim Abspielen von PPT-Folien Umgang mit Leerzeichen beim Abspielen von PPT-Folien Mar 26, 2024 pm 07:51 PM

1. Öffnen Sie die von Ihnen erstellte PPT-Datei und wählen Sie die zweite Folie aus. 2. Wählen Sie auf der zweiten Folie eines der Bilder aus und wählen Sie dann [Animation], um einen beliebigen Animationseffekt hinzuzufügen. 3. Ändern Sie in der Startspalte der Animationsleiste [While Standalone] in [After Previous Animation], und Sie werden sehen, dass sich die Bildanimationsbezeichnung [1] in [0] ändert. Machen Sie dasselbe für nachfolgende Folien. Sie können den Effekt sehen, indem Sie die Folie am Ende abspielen.

So brechen Sie Zeilen in BarTender um - So brechen Sie Zeilen in BarTender um So brechen Sie Zeilen in BarTender um - So brechen Sie Zeilen in BarTender um Mar 05, 2024 pm 07:52 PM

Viele Benutzer verwenden die BarTender-Software in ihren Büros. Kürzlich haben einige neue Benutzer gefragt, wie man Zeilen in BarTender umbricht. 1. Klicken Sie in BarTender auf die Schaltfläche „Text erstellen“ in der Symbolleiste, wählen Sie „Einzeiligen Text erstellen“ und geben Sie den Textinhalt ein. 2. Doppelklicken Sie auf das erstellte Textobjekt, um das Dialogfeld mit den Texteigenschaften zu öffnen. Wechseln Sie zum Reiter „Textformat“ und wählen Sie rechts bei „Typ“ „Absatz“ aus. 3. Klicken Sie auf „Schließen“, passen Sie die Größe des Textfelds an, geben Sie mehr Text ein oder brechen Sie den Text entsprechend den tatsächlichen Anforderungen um.

So brechen Sie Zeilen in einer Excel-Tabelle um So brechen Sie Zeilen in einer Excel-Tabelle um Feb 09, 2024 pm 02:00 PM

Bei der Verwendung von Excel müssen wir viele verschiedene Operationen ausführen. Manchmal müssen wir eine Zeile in eine Zelle umbrechen. Schauen wir uns an, wie man Zeilen in einer Computer-Excel-Tabelle umbricht. [Sammlung von Excel-Tabellenoperationsmethoden] Wie werden Zeilen in einer Excel-Tabelle umbrochen? Antwort: Sie können dies tun, indem Sie Zeilen automatisch umbrechen und Zellenformate festlegen. 1. Automatischer Zeilenumbruch 1. Wir wählen den Bereich aus, der in der Tabelle umgebrochen werden soll, und klicken auf der Seite [Start] auf [Automatisch umbrechen]. 2. Anschließend stellen wir die Breite von Spalte A auf einen geeigneten Wert ein das Zellenformat 1. Zuerst wählen wir den Bereich aus, der umbrochen werden soll, klicken mit der rechten Maustaste und klicken auf [Zellenformat festlegen] 2. Dann im Popup;

So brechen Sie Zellen in Excel auf Apple-Computern um So brechen Sie Zellen in Excel auf Apple-Computern um Feb 18, 2024 pm 08:39 PM

Umbrechen von Zeilen in Zellen in Apples Excel Die Excel-Software von Apple ist ein leistungsstarkes Tabellenkalkulationstool, das viele praktische Funktionen bietet, die Benutzer bei der Datenverarbeitung und -analyse unterstützen. Bei der Verwendung von Excel müssen wir manchmal mehrere Textzeilen in Zellen eingeben, um die Daten besser zu organisieren und darzustellen. Da sich Excel für Apple-Computer jedoch geringfügig von der Windows-Version von Excel unterscheidet, unterscheidet sich auch die Methode zum Zeilenumbruch. In der Windows-Version von Excel können wir das direkt

C++-Programm: Fügen Sie einem Array ein Element hinzu C++-Programm: Fügen Sie einem Array ein Element hinzu Aug 25, 2023 pm 10:29 PM

Ein Array ist eine lineare sequentielle Datenstruktur, die dazu dient, homogene Daten an zusammenhängenden Speicherorten zu speichern. Wie andere Datenstrukturen müssen Arrays in der Lage sein, Elemente auf effiziente Weise einzufügen, zu löschen, zu durchlaufen und zu aktualisieren. In C++ sind unsere Arrays statisch. C++ bietet auch einige dynamische Array-Strukturen. Bei einem statischen Array können Z-Elemente im Array gespeichert werden. Bisher haben wir n Elemente. In diesem Artikel erfahren Sie, wie Sie in C++ Elemente am Ende eines Arrays einfügen (auch als anhängende Elemente bezeichnet). Verstehen Sie das Konzept anhand von Beispielen. Die Verwendung des Schlüsselworts „this“ ist wie folgt: GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin

PyCharm-Tutorial: Beherrschen Sie schnell die automatische Zeilenumbruchfunktion PyCharm-Tutorial: Beherrschen Sie schnell die automatische Zeilenumbruchfunktion Feb 23, 2024 am 08:33 AM

PyCharm ist eine leistungsstarke integrierte Python-Entwicklungsumgebung, deren automatische Zeilenumbruchfunktion Entwicklern dabei helfen kann, Code effizienter zu schreiben. In diesem Artikel wird erläutert, wie Sie die automatische Zeilenumbruchfunktion in PyCharm schnell beherrschen, und es werden spezifische Codebeispiele bereitgestellt. 1. Aktivieren Sie die automatische Zeilenumbruchfunktion. In PyCharm ist die automatische Zeilenumbruchfunktion standardmäßig nicht aktiviert und muss manuell eingestellt werden, bevor sie verwendet werden kann. Die spezifischen Schritte sind wie folgt: Öffnen Sie PyCharm und geben Sie Datei->Einstellungen ein;

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Nov 21, 2023 pm 01:16 PM

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Einführung: Im Webdesign kann der dynamische Effekt von Elementen das Benutzererlebnis verbessern, wobei der Gleiteffekt ein häufiger und beliebter Übergangseffekt ist. Durch die Übergangseigenschaft von CSS können wir leicht den gleitenden Animationseffekt von Elementen erzielen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Übergangseigenschaften den Gleiteffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis und eine bessere Anwendung zu ermöglichen. 1. Einführung in den CSS-Übergangsattributübergang CSS-Übergangsattributtra

CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen Nov 21, 2023 pm 06:36 PM

CSS-Transformation: Um den Rotationseffekt von Elementen zu erzielen, sind spezifische Codebeispiele erforderlich. Im Webdesign sind Animationseffekte eine der wichtigen Möglichkeiten, die Benutzererfahrung zu verbessern und die Aufmerksamkeit des Benutzers zu erregen, und Rotationsanimationen sind eine der klassischeren Methoden. In CSS können Sie das Attribut „transform“ verwenden, um verschiedene Verformungseffekte von Elementen zu erzielen, einschließlich Rotation. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der CSS-Transformation den Rotationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. 1. Verwendung von CSSs „transf

See all articles