Padding für Inline-Elemente

Ich lese ein Buch über CSS-Grundlagen. Es wird behauptet in dem Buch, das ein inline-element, hat die komplette Polsterung Eigenschaften, aber keine margin-top/bottom Eigenschaften, nur margin-left/rechts - Eigenschaften.

Meine erste Frage ist, wo kann ich finden, dass dies eine offizielle Anweisung? Ich fand hier , wenn margin-top/bottom eingestellt ist auto dann zu 0. Aber ist es nicht anders sagen margin-top/bottom gilt nicht für inline-Elemente?

Meine zweite Frage ist, muss ein inline-element, wirklich komplette Polsterung Eigenschaften? Ich habe versucht, das folgende Beispiel:

Padding für Inline-Elemente

<!DOCTYPE html>
<html>
  <head> </head>

  <body>
    <div style="margin: 20px; border: solid 20px;background: red;">
      <p style="margin:0">
        test test test test test test test test test test test test test test
        test test test test test test test test test test

        <strong style="padding:20px;background-color:yellow">hello</strong>
        test test test test
      </p>
    </div>
  </body>
</html>

Nun, dies zeigt, dass die Polsterung wirklich funktioniert irgendwie, aber für einige Grund padding-top und padding-bottom hat keine Auswirkung auf den umgebenden text. Warum ist das so? Ist dies irgendwo erwähnt W3-standards?

Fragen Sie Gewinnspanne, aber ein Beispiel geben, - Polsterung? Ihre Frage, die Sie state "inline-element, hat die komplette Polsterung Eigenschaften" und Ihr Beispiel zeigt, dass, also, was ist Ihre Frage.
und auch das Beispiel zeigt, dass die Polsterung arbeitet nur 50%. Die Hintergrundfarbe angewendet wird, padding-top, aber padding-top hat keinen Einfluss auf den umgebenden text. Daher behaupte ich, dass die Polsterung nicht wie erwartet funktioniert.
Siehe meine Antwort. Es ist das hinzufügen Polsterung an den strong element. Aber inline-Elemente haben kein height als block und inline-block-Elemente. Sie haben keinen Einfluss auf die Höhe Ihrer Eltern, wie ein block-element wie die height inline-element ist, dass es line-height als pro 10.6.1 denen Sie verknüpft sind.

InformationsquelleAutor Adam | 2015-11-09

  1. 0

    Meine erste Frage ist, wo kann ich finden, dass dies eine offizielle Anweisung?
    Ich fand hier, dass, wenn margin-top/bottom auf 'auto' eingestellt ist
    zu '0'. Aber ist es nicht anders sagen, 'margin-top/botton hat
    nicht für inline-Elemente?

    In 8.1-Box-Modell Spec (http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin) "Die Marginalie Kante umgibt, und die Feld-Marge. Wenn die Marge hat 0 Breite(Höhe), die Rand-Rand ist die gleiche wie die Grenze, Rand".

    In der Seite, die du verlinkt 10.6.1 "Die 'height' - Eigenschaft nicht gelten, aber die Höhe der box wird durch die 'line-height' - Eigenschaft." So, da die Höhe nicht gelten, dann wird die Rand-Rand ist die gleiche wie die Grenze Rand.

    Meine zweite Frage ist, muss ein inline-element, wirklich komplett
    Polsterung Eigenschaften? Ich habe versucht, das folgende Beispiel:

    Gleichen Grund wie oben. "die Höhe der box wird durch die 'line-height' - Eigenschaft". Die Höhe dieses starke element festgelegt ist, indem die line-height als es hat keine Höhe auf Referenz-als block oder inline-block-element. Ich bin mir ziemlich sicher, dass, wenn Sie gab es inline-block-Eigenschaften würde es als ein block hat eine Höhe im Modell.

    Danke. Dennoch, ich bin neu in der WC3-Dokumentation-und das ist wahrscheinlich der Grund, warum ich verstehe nicht deine Schlussfolgerungen. Hier ist mein erstes problem: ich sehe, dass es ist, sagte in 10.6.1 Wenn margin-top = 'auto', dann ist es auf 0 gesetzt. Ich habe das Gefühl, dass Sie sagen, Was auch immer margin-top zugewiesen ist, wird es auf 0 gesetzt aber ich finde nicht, diese Aussage.
    Direkt nach "Ihrem berechneten Wert 0 ist" heißt es: "Die 'height' - Eigenschaft nicht gelten, aber die Höhe der box wird durch die 'line-height' - Eigenschaft." Also Folgen Sie mir, wenn die 'height' - Eigenschaft nicht gelten, dann pro das box-Modell 8.1 die ich verlinkt dann die Höhe der box ist nur durch die line-height zumindest ist das die Art, wie ich es verstehe.

    InformationsquelleAutor Leeish

Schreibe einen Kommentar