Wie um den Abstand zwischen den Linien in ein div ohne Einstellung der Zeilenhöhe

Ich habe ein div, Elemente mit display-set-inline-block. Diese enthaltenen Elemente haben unterschiedliche Höhen. Die resultierenden Zeilen in der div haben verschiedene Höhen, entsprechend den Höhen der Elemente in Ihnen. Dies ist, wie ich es will. Aber ich möchte etwas Platz zwischen den Zeilen in den div. Zum Beispiel, der Elemente in zusammenhängende Zeilen mit Hintergrundfarbe eine sichtbare Lücke zwischen Ihnen. Der gemeinsame Rat für eine paragrpah zu setzen line-height, aber dies setzt die gleiche Höhe für alle Zeilen in der div, die ich nicht will. Gibt es eine Möglichkeit, um einen Raum zwischen den Zeilen, ohne dass alle Linien die gleiche Höhe und ohne Veränderung der enthaltenen Elemente?

In eine vereinfachte form der HTML-Inhalt sieht wie folgt aus:

<div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    <div style="display: inline-block;...">variable stuff</div>
    ...
</div>

Jede innere div hat verschiedene Inhalte: unterschiedliche Höhe und Breite.

Kann ich style alle inneren divs. Pragmatisch, habe ich bereits getan, und haben ein Ergebnis könnte ich gut Leben. Aber ich war überrascht zu sehen, dass CSS nicht ein offensichtlicher Weg zu stellen Sie den Zeilenabstand (d.h. der Abstand zwischen den Linien, im Gegensatz zu der Höhe der Zeilen: ich weiß über die line-height ist es aber nicht, direkt, Zeilenabstand und hat den (unerwünschten, in diesem Fall) bewirkt, dass alle Zeilen die gleiche Höhe - auch die Zeilen, wo alle Elemente in der Linie haben eine niedrige Höhe). Ich bin neugierig zu wissen, ob es eine Möglichkeit gibt, stellen Sie den Zeilenabstand, der als parameter der äußeren div, ohne die Einstellung der Zeilenhöhe.

Ich denke, dass es Zeilenabstand, sondern ein anderer Weg, um daran zu denken ist, oben und unten Marge auf jede Zeile in der äußeren div, anstatt auf dem äußeren div als ganze, und ohne überschreiben der oberen und unteren Ränder der alle inneren divs (das ist, was ich getan habe für jetzt) oder, dass alle Zeilen die gleiche Höhe (line-height).

Nur so kann ich mir vorstellen, es zu tun, ohne überschreiben der Ränder des inneren divs, indem Sie umschließen jede in einem anderen div, einfach, um einen gemeinsamen Rand. Wenn ich es auf diese Weise, die Ränder der beiden divs nicht zusammenbrechen, das kann ich mit Leben. Dies funktioniert gut genug, in diesem Fall, in dem der gesamte Inhalt divs, aber es würde nicht funktionieren, wenn ich hatte gemischte text und divs (also text durchsetzt mit divs), in dem Fall würde ich zurück sein, um wünschte, ich könnte einen Weg finden, Zeilenabstand festlegen.

InformationsquelleAutor Ian | 2012-07-30

css html

1

Dass nur getan werden kann mithilfe margin Stil. Sie nicht brauchen, um wickeln Sie jeden enthaltenen DIVs mit einem anderen DIV. Verwenden Sie einfach die STYLE tag.

Hier ist ein Beispiel. Rand-und Farbstoffe Hinzugefügt werden, für demo-Zwecke.
```
<style>
    #container     {width:30ex; outline:1px solid black; padding:0 .2em; background:white;}
    #container>div {display:inline-block; margin:.2em 0; background:#fca;}
</style>
<div id="container">
    <div style="height:1em">variable</div>
    <div style="height:5em">variable stuff variable</div>
    <div style="height:2em">variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:3em">variable stuff variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
</div>
```
Auch mit border auch, aber margin ist einfacher.
Stil die inneren divs ist was ich getan habe und, mit Variationen, was style (margin, border oder padding) ist das, was Jay, grillp und bkizer1 haben alle empfehlenswert. Ich suchte viele Stunden und fand keine Anzeichen für eine direkte Kontrolle über den Zeilenabstand, die im Gegensatz zu line-height, also ich denke, das ist es. Jay, sofern ein schönes Beispiel, also ich kenn dieses die Antwort, aber vielen Dank an alle.

InformationsquelleAutor Jay
2

Warum nicht versuchen, CSS margin oder border-Einstellungen auf Ihrem P-Elemente?

Ich bin in der Hoffnung, nicht wieder schreibt alle enthaltenen Elemente. Margin und border, angewendet auf das mit div nicht auf den Abstand zwischen den Zeilen in den div.
Sorry.. Gerade bearbeitet meine Antwort.. das 'p' nicht zeigen.. ich gehe davon aus, dass deine DIV enthält eine Reihe von Absätzen?
Sorry, keine Absätze (Sie können sich nicht enthalten, ein block-element, auch wenn die enthaltenen block-element den display-set-inline-block). Ich habe ein Beispiel und weitere Erläuterungen zu dem Beispiel, wie es scheint, habe ich nicht machen mich ganz klar - sorry dafür.
So, es sei denn, du kannst die inneren DIVs irgendwie mit css-Selektoren (class auf innere div-Element, Klasse oder id äußeren div -) es wird schwer sein, Ziel die inneren divs.

InformationsquelleAutor grillp
1

Was über die Verwendung der css-Eigenschaft padding? Zum Beispiel:
```
padding:25px;
```
Können Sie auch angeben: padding-right, padding-bottom, etc.

Ich habe versucht, hinzufügen Polsterung an den äußeren div, aber es macht nicht die Differenz, um die Lücke zwischen den Linien innerhalb der div. Ich könnte wieder schreiben alle enthaltenen Elemente, aber ich hoffe es gibt einen Weg, um zu vermeiden, dass.

InformationsquelleAutor bkizer1

Was über die Verwendung von Spalten mit inline-block und in jeder Spalte sind weitere divs.

<div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
</div>

InformationsquelleAutor Michael

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.