CSS-Box-Modell (Ränder und Abstand) für den vertikalen Abstand zwischen Absätzen
https://stackoverflow.com/questions/568561
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie sollten CSS „Margin“ und „Padding“ für den vertikalen Abstand zwischen Absätzen verwendet werden:
- Kann der vertikale Abstand zwischen Absätzen durch Auffüllen und/oder durch Ränder definiert werden?
- Wenn es mit beidem möglich ist, welches ist dann das bessere oder normalere?
- Neigen Sie dazu, eine Auffüllung ungleich Null zu definieren? Und Margen ungleich Null, und wenn ja, wie viel davon jeweils?
Der Beispiel für Ränder, Polsterung und Ränder erklärt in der Theorie Was ist der Unterschied zwischen Rand und Polsterung:Ich frage mich, wie viel ich jeweils verwenden soll in der Praxis, um eine normale, gut aussehende Seite darzustellen.
Zweitens, gegebenes Markup wie das folgende ...
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
Wenn Sie den gleichen vertikalen Abstand zwischen jedem Absatz und/oder Listenelement wünschen, dann:
- Würden Sie dazu neigen, das zu definieren?
<ul>als ob es einen eigenen Rand + Auffüllung von Null hätte? - Oder würde das
<ul>haben normalerweise einen Rand ungleich Null, der dann keine Auswirkung hätte, da dieser Rand mit dem Rand des zusammengelegt wird<li>darin und von der<p>was geht ihm voraus?
Drittens (und ich bin mir nicht sicher, ob ich diese dritte Frage stellen sollte) die Spezifikation für kollabierende Ränder sagt: "Wenn die oberen und unteren Ränder einer Box angrenzend sind, dann ist es möglich, dass Ränder durch sie zusammenbrechen." Wenn ich einen leeren Absatz wie den folgenden in der Mitte habe ...
<p>Hello</p>
<p></p>
<p>World</p>
...dann würde ich erwarten, dass dies ein leerer Absatz ist, d. h.mit einem zusätzlichen vertikalen Abstand zwischen den Hello und das World:
- Was würde verhindern, dass die Ränder dieses leeren Absatzes zusammenfallen und der leere Absatz daher unsichtbar wird:Ist es eine Polsterung ungleich Null, die dies bewirkt?
- In welchem Szenario Ist Ist es sinnvoll, wenn eine Box über angrenzende obere und untere Ränder verfügt, die zusammenfallen?
Antworten auf eine oder alle dieser drei Fragen wären willkommen.
Ich bin im Moment nicht besonders an IE-spezifischen Boxmodellproblemen interessiert:Stattdessen möchte ich wissen, wie man den Standard verwendet.
Lösung
Um Ihre erste Frage zu beantworten: Im Allgemeinen spielt es keine Rolle, ob Sie „Rand“ oder „Padding“ verwenden, um den Abstand zwischen Elementen hinzuzufügen. Wenn Sie jedoch einen Rahmen auf ein Element anwenden und „Padding“ verwenden, um einen Leerraum zu schaffen, wird der Rand so weit hinausgeschoben.
Um Ihr zweites Problem zu beantworten, schauen Sie sich einfach diesen Code an und spielen Sie vielleicht damit herum:
<html>
<head>
<title>Box Model Tests</title>
<style type="text/css">
/* Just to get rid of the annoying padding/margin setting that is default
in most browsers on the body tag from messing up our experiments */
body{
margin: 0px;
padding: 0px;
}
p{
margin: 0px;
padding: 0px;
}
/* It appears that if you modify the ul padding it tends
to remove the bullet points, that is if you set the paddign to zero */
ul{
margin: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
</body>
</html>
Beachten Sie, dass im obigen Beispiel der verbleibende Platz vor allem mit den Eigenschaften der Schriftart zu tun hat, die mit den gleichen Methoden wie jedes andere Element geändert werden können.
Und zum Dritten:
Ich denke, „garrow“ hat recht, was das Leere angeht <p>Ich stoße bei der Verwendung nicht so oft auf dieses Problem <p> Allerdings immer weniger in meinen Layouts Dieser Artikel sah sehr interessant aus und bietet meiner Meinung nach eine bessere Erklärung als W3C.
Andere Tipps
Um Ihre zu beantworten 3 Frage;
Das zweite < P > als leeres Blockebenenelement wird einfach nicht gerendert.
Sie können erzwingen, dass das Element im leeren Zustand gerendert wird, indem Sie ihm eine Höhe oder einen Abstand zuweisen oder ein geschütztes Leerzeichen einfügen innerhalb des Para.(Es gibt wahrscheinlich noch mehr Möglichkeiten, dies zu tun).
Normale Leerzeichen (z. B. Zeilenumbrüche, Tabulatoren oder Leerzeichen) scheinen in dieser Hinsicht nicht zu funktionieren.
Bearbeiten #2 ::Um richtig zu veranschaulichen, wie das alles funktioniert, speichern Sie es lokal und sehen Sie, was gerendert wird.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
p { margin:10px; background-color:#ccc;}
p.padding { padding:5px; background-color:#eec; }
p.height { height:30px; background-color:#cee; }
</style>
</head>
<body>
<p>text</p>
<p class="padding">i have padding</p>
<p class="padding"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>5 empty paragraphs before this, only one will render. (it has padding)</p>
<p>& nbsp;</p>
<p> </p>
<p> </p>
<p>
</p>
<p>3 whitespace before me, one will render, it has &nbsp;</p>
<p class="height">im 30 px high</p>
<p class="height"></p>
<p></p>
<p></p>
<p>3 empty before me, 1 will show (it has height)</p>
<p>text</p>
<p>text</p>
</body>
</html>
Hehe, na ja...Webbrowser sind unterschiedlich. Ich würde sagen, dass das, was gut zu Firefox passt, normalerweise auch gut zum Standard passt, aber das stimmt auch nicht ganz.
Laut xhtml1-strict.dtd kann nur <li/> ein untergeordnetes Element von <ul/> sein.Ich schlage vor, dass Sie sich einen Designer suchen, der sich mit den Standards auskennt.Dies sind formale Spezifikationen, mit denen Sie Ihr HTML überprüfen können.
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p> <!--illegal here-->
</li>
</ul>
Aber zurück zu Ihrer Frage (die übrigens schwer zu beantworten ist).Es gibt viele Fälle, in denen Sie Ränder und Abstände ungleich Null definieren würden.Ich bevorzuge tendenziell einen zusätzlichen Rand, wenn keine Auffüllung erforderlich ist, und dann eine Auffüllung, wenn der Rand nicht funktioniert.Jede Situation ist anders und Sie müssen wissen, wann eine davon bevorzugt wird.
Ich werde nicht auf Details eingehen, da ich denke, dass Sie hier auf dem richtigen Weg sind.Experimentieren Sie weiter und ich weiß, dass Sie es schaffen werden.Bedenken Sie jedoch, dass Webbrowser die Dinge anders machen.
Ich bin mir bei der Sache mit dem kollabierenden Rand nicht sicher, aber Leerzeichen zählen manchmal als Rand.Wenn mehrere Elemente ohne Leerzeichen dazwischen auftreten, ist das manchmal anders, als wenn es keine Leerzeichen gäbe.
Auch hier gilt, dass es eine Menge zu begreifen gilt, daher werde ich nicht auf Einzelheiten eingehen, aber Sie müssen über diese Dinge Bescheid wissen und dieses Wissen werden Sie sich durch Übung aneignen.
Die Absatz- und Listenränder sind standardmäßig nicht in allen Browsern gleich. Wenn Sie mit dem Layout beginnen, sollten Sie einen Satz grundlegender CSS-Regeln für Ihre Seite definieren.Und wenn Sie Hilfe bei der Einstellung der Ränder benötigen, empfehle ich Ihnen, einen Blick auf die zu werfen Kanons der Seitenkonstruktion.
p { margin: 1em 0; }
ul { margin: 1em 0; }
ul > li { margin: 1em 0; }
Die oben genannten Regeln sind nur Beispiele, aber sie stellen sicher, dass die oberen und unteren Ränder für Absätze und Listenelemente unabhängig vom Browser gleich sind.Solche Dinge sorgen dafür, dass Ihre Seite in allen Browsern gleich aussieht.
Probieren Sie weiterhin Dinge aus und lesen Sie die hervorragenden CSS-Blogs.Bitten Sie um Hilfe, wenn Sie auf wirklich undurchsichtige Grenzfälle stoßen.Diese Leute haben viel Zeit damit verbracht, eine Lösung zu finden, und Sie sollten Ihre Zeit besser damit verbringen, zu lernen, wie sie es geschafft haben, als das Rad neu zu erfinden.
Das Wichtigste, was Sie wissen müssen, ist, dass angrenzende (vertikale) Ränder nur dann gelten, wenn Sie Folgendes haben:
p { margin: 1em 0; }
...
<p>Paragraph one</p>
<p>Paragraph two</p>
Der Abstand zwischen ihnen beträgt 1em, nicht 2em.
Die Polsterung ist separat.Wenn die Absätze eine Polsterung hätten, läge sie in ihren Kästchen.Die Quelle der Wahrheit für all diese Dinge ist der W3C-CSS-Standard.Zum Beispiel, kollabierende Ränder:
In dieser Spezifikation ist der Ausdruck kollabierende Ränder bedeutet, dass angrenzende Ränder (keine Polster- oder Grenzgebiete sie trennen) von zwei oder mehr Kisten (die nebeneinander oder verschachtelt sein können) zu einem einzigen Rand.
In CSS2 fällt die horizontalen Ränder nie zusammen.
Die vertikalen Ränder können zwischen bestimmten Kästchen zusammenbrechen:
- Zwei oder mehr angrenzende vertikale Ränder von Blockboxen im normalen Flusskollaps.Die resultierende Randbreite ist das Maximum der angrenzenden Randbreiten.Bei negativen Rändern wird das absolute Maximum der negativen angrenzenden Ränder vom Maximum der positiven angrenzenden Ränder abgezogen.Wenn es keine positiven Ränder gibt, wird das absolute Maximum der negativen benachbarten Ränder von Null abgezogen.
- Die vertikalen Ränder zwischen einer schwebenden Box und einer anderen Box kollabieren nicht.
- Die Ränder von absolut und relativ positionierten Kisten kollabieren nicht.
Bitte konsultieren Sie die Beispiele für Rand, Polsterung und Grenzen, um zusammengebrochene Margen zu veranschaulichen.
Grenzen sind etwas anders, besonders in Tische wo sie je nach CSS ineinander übergehen können oder nicht.
Damit ist die Geschichte natürlich noch nicht zu Ende.Browser können bei der Berechnung von Kombinationen aus Breite, Rändern, Rändern und Innenabständen variieren. Dies wird jedoch weitgehend dadurch verringert, dass Browser in den Standardmodus (mit einem DOCTYPE) und einem großen Thema an sich gezwungen werden (ebenso wie das, was Sie tun, um solche Dinge zu minimieren). Probleme).
