In HTML wird ein Textblock, der aus einer anderen Quelle zitiert wird, wie folgt markiert
<blockquote>Hey, I'm a block of text from elsewhere.</blockquote>In Ihrem CSS werden Sie wahrscheinlich spezielle Stile für diese haben. Vielleicht ein wenig background und padding
blockquote { padding: 10px; background: #eee; }Wenn das Zitat mehrere Absätze umfasst, können Absätze innerhalb des Blockquotes verschachtelt sein (beides sind Block-Level-Elemente, also ist das in Ordnung). Zitate befinden sich auch wahrscheinlich in größeren Textbereichen, daher nehmen wir an, dass Absätze darum herum sind.
<p>Preceding paragraph</p>
<blockquote>
<p>Hey, I'm a block of text from elsewhere.</p>
<p>And I'm another one.</p>
</blockquote>
<p>Succeeding paragraph</p>Und natürlich brauchen wir etwas Abstand nach diesen Blöcken, damit Absätze Luft zum Atmen haben und wie Absätze aussehen.
blockquote, p { margin-bottom: 20px; }Jetzt haben wir ein klassisches Problem. Der margin des letzten Absatzes innerhalb des Blockquotes wird die Größe des Blockquotes nach unten verschieben und somit eine ungleiche Menge an Platz um das Zitat herum erzeugen.
Dies kann behoben werden, indem der untere Abstand des letzten Absatzes innerhalb des Blockquotes entfernt wird.
blockquote p:last-child { margin-bottom: 0; }Beachten Sie, dass :last-child in praktisch allem unterstützt wird, außer in IE 8 und darunter. Wenn dies ein großes Problem darstellt, probieren Sie dies aus.
Oder für bessere Browserunterstützung ohne JavaScript können Sie IE7/IE8-Unterstützung erhalten, indem Sie
blockquote, p { margin-top: 20px; }
blockquote p:first-child { margin-top: 0; }...verwenden, da beide Browser :first-child, aber nicht :last-child unterstützen.
Kollabierende Ränder
Beachten Sie, dass die obige Situation nur dann eintritt, wenn Sie padding oder border für Ihre Blockquotes verwenden. Wenn Sie nur Margins verwenden, würde dieses Problem nie auftreten. Ein Absatz mit einem unteren Rand von 20 Pixeln, der sich innerhalb eines Blockquotes mit einem unteren Rand von 20 Pixeln befindet, wird seinen Nachbarn im Süden immer noch nur um 20 Pixel nach unten verschieben. Dies ist kein Fehler, sondern normales Margin-Collapsing. Wenn Sie mehr wissen möchten, hat Andy Budd einen Artikel von vor sieben Jahren, der alles enthält, was Sie jemals wissen wollten.
Würde * { margin:0; padding:0; } nicht die Ränder und Abstände dieser Blockquote/p-Kombination aufheben?
Er hat das in sein CSS geschrieben :)
https://css-tricks.de/examples/BlockquoteDouble/css/style.css
Der universelle Selektor (*) wird verwendet, wenn Sie keine CSS-Eigenschaft für Blockquote angeben; wenn Sie sie jedoch angeben, überschreibt sie die Eigenschaft * und verwendet die definierte Eigenschaft, d.h. margin-bottom:20px
Das macht mich wahnsinnig. Warum sollten die IE-Entwickler denken: „Okay, wir implementieren jetzt first-child, aber wir kümmern uns nicht um last-child“? Ich kann keinen guten Grund dafür sehen, außer Apathie. Grrr.
Danke für den Beitrag, gut zum Nachdenken. Ich werde vielleicht IE7.js ausprobieren. Im Moment kümmere ich mich nicht um last-child, ich benutze einfach eine .last-Klasse für alles, was sie braucht. Ich würde es lieber mit CSS machen, aber ich fand es nie die Mühe wert, IE in Form zu bringen.
Du weißt, dass Erstgeborene die ganze Aufmerksamkeit bekommen :P
Ich stimme dir zu, Mann.
Ein paar Deppen müssen das entschieden haben.
Ich hätte auch gedacht, dass ein CSS-Reset dieses Problem vermeidet, oder nicht?
Nein, das tut es nicht, weil der zusätzliche Platz daher rührt, dass das Absatz-Tag in der Blockquote ist und Sie (angenommen als Designer) Blockquotes und Absätze mit einem Rand von x definiert haben, sodass sich die Ränder/Abstände beider Elemente addieren (um 2x zu ergeben). Um dies zu korrigieren, müssen die Ränder/Abstände von einem der Elemente entfernt werden, damit es zum Design passt.
Danke dafür, aber ist IE7.js nur für IE7 und nicht für IE6?
Es ist etwas irreführend benannt, da IE7.js tatsächlich mit IE6, 7 und 8 verwendet werden kann. Aber eine Warnung. Als ich mich zum ersten Mal mit CSS auseinandersetzte und das allzu vertraute Entsetzen über mein anscheinend perfektes Layout, das in jedem MS-Browser brach, spürte, las ich von dem IE7.js-Skript und dachte, all meine Geburtstage wären auf einmal eingetreten. Es schien zu versprechen, alles Problematische mit CSS in IE zu beheben. Von nun an dachte ich, alle meine Websites wären ein Kinderspiel. Seitdem habe ich festgestellt, dass es tatsächlich besser ist, bedingte Kommentare und spezifische Workarounds zu verwenden, da paradoxerweise die meisten meiner Layouts mit angewendetem IE7.js schlimmer denn je brechen. Dies könnte an einigen Lücken in meinem eigenen Wissen liegen, aber für mein weniger als expertenhaftes Auge scheint es neue Probleme zu verursachen, die vorher nicht da waren, und es bereitet mir weniger Kummer und Haarverlust, eine andere Lösung zu finden. Obwohl ich nur zu gerne anders lernen würde.
Großartig.
Sehr nützliche Informationen.
Ich hatte ein ähnliches Problem mit meinem CSS-Typografie-Framework Azbuka http://code.google.com/p/azbuka/. Ich habe diese Lösung verwendet: blockquote > p { padding:0;}
Ich fand den Abstand davor schon immer nützlicher und zuverlässiger als den danach. Untere Ränder spielen einfach nicht gut zusammen.
Klingt, als ob das Problem das "p"-Tag ist, das ich schon vor einiger Zeit aufgegeben habe. Generell nutzlos.
Es gibt kein Problem mit p-Tags und es ist auch nicht ratsam, sie nicht zu verwenden.
Wirklich? Keine Absätze in Ihren Designs? mmm... Ich glaube, Sie machen Witze
Ich glaube, ich verstehe den Punkt nicht, aber das scheint ein Reset-Problem zu sein.
So würde ich das Problem beheben
http://jsbin.com/ulove4
Es ist nicht einmal ein Reset-Ding, oder? Das „Problem“ tritt nur auf, wenn Sie allen Weißraum innerhalb der Blockquotes definieren möchten, indem Sie die p-Tags gestalten. Ihr Beispiel, Cory, teilt den Raum zwischen den Blockquotes und den p-Tags auf. Entweder Ihr Beispiel oder :first-child wird in der Praxis funktionieren.
Es ist kein Reset-Problem oder so etwas. Es ist nur so, dass der Abstand des äußeren Containers nicht kollabiert, wenn innere Elemente einen Rand haben. So einfach ist das. Eine Lösung wäre, margin-top auf den inneren p-Tags zu verwenden. So könnten Sie :first-child auf dem ersten p-Tag verwenden.
Ausgezeichnet. Vielen Dank.
Danke Mike + Norman. Hat das „Problem“ verständlich gemacht.
Schönes Blockquote-Beispiel, es ist immer schön, die p-Tags stylen zu können, und die Lösungen gefallen mir, vielen Dank. LT
IE 7 und 8 implementieren :first-child, aber nicht :last-child?! Wow. Man lernt jeden Tag etwas Neues!
Nun, :last-child ist eigentlich CSS3, daher haben < IE8 es natürlich nicht implementiert.
immer einen Schritt hinterher
Es ist ziemlich logisch, den benachbarten Selektor zu verwenden, um Elemente auszuwählen, die zu etwas anderem benachbart sind.
Funktioniert wie ein Zauber und ist ziemlich einfach.
Funktioniert aber nicht mit IE6, oder?
...genauso wie fast jeder andere Fall auf dieser Seite, ie7.js (was steckt im Namen) und wahrscheinlich die gegebene Lösung. Aber Sie haben zu 100% Recht, genau auf den Punkt gebracht!
Von all den Lösungen auf dieser Seite sind keine für IE6 gedacht (sie könnten funktionieren, zweifellos), aber zumindest diese ist semantisch korrekt und kein Hack...
Probieren Sie dieses Stück Arbeit aus, wenn Sie sich Sorgen um CSS-Selektoren in IE machen. Es bietet auch CSS3-Selektoren und funktioniert mit einer Reihe von JS-Bibliotheken: http://selectivizr.com/ (früher bekannt als ie-css3.js).
Ich würde einfach auf Blockquotes verzichten oder sicherstellen, dass sie keine Stile haben, sodass nur der p die Kontrolle hat, das ist sauberer, und Sie werden später weniger unerwartete Nachteile entdecken.
Hallo!
Was ist mit dem einfachen Setzen von
blockquote { padding-bottom: 0; background: #eee; }
?
Sie brauchen mindestens ein Pixel, sonst kollabiert der Rand des letzten p-Tags, was zu keinem Abstand zwischen p und Blockquote führt.
Ich halte mich an die :last-child-Lösung, die im Blogbeitrag vorgestellt wird.
Und übrigens, nur eine Kleinigkeit - damit die Markup validiert, muss der Inhalt innerhalb eines Blockquotes in einem Block-Level-Element stehen. Daher würde Ihr erstes Codebeispiel nicht validieren.
Es validiert als HTML5, was der Doctype dieser Seite ist. Meine erste Reaktion war dieselbe, das muss ich sagen. Aber ich habe es auf einer Testseite überprüft und siehe da...
Vielleicht könnte Chris das im Artikel erwähnen?
Oh, das war mir neu! Danke, dass Sie darauf hingewiesen haben.
Wie wäre es, systematisch Absätze in Blockquotes zu setzen, unabhängig davon, wie viele es sind? So könnten Sie nur Blockquotes mit Top-Padding und Blockquote-p-Bottom-Margin stylen.
blockquote { padding-top:10px }
blockquote p { margin-bottom:10px }
Laut dem Bild
verursacht der „zu viel Platz“ nicht die Standard-CSS-Eigenschaft `padding-bottom` des Blockquotes?
In Ihrem Beispiel: blockquote, p { margin-bottom: 20px; } ist das Komma nicht unnötig und sollte eigentlich nur ein Leerzeichen sein, damit diese Deklaration nur Absätze innerhalb eines Blockquotes betrifft?
Überraschenderweise hatte ich das schon selbst herausgefunden! Inklusive des :first-child/:last-child-Bugs... wow IE, wirklich?
Ich würde sagen, ich entwickle mich als Webentwickler!
Ich möchte CSS in Blockquote CSS anzeigen