Warum bricht span außerhalb von div ab, wenn Rand und Padding angewendet werden?

8

Ich weiß, dass dies ein sehr einfaches CSS ist. Wie behalte ich die Spanne innerhalb der div? Im Moment erstreckt sich der Bereich außerhalb der Ober- und Unterseite des Div.

%Vor% %Vor%
    
user1405195 19.05.2012, 14:28
quelle

3 Antworten

26

Um Ihre Frage zu beantworten, ist dies nicht nur ein Problem mit padding oder margin , sondern auch mit width , display und das Box-Modell .

jsFiddle

%Vor%

Dies berücksichtigt alle Abstände, Ränder oder Breiten, die Sie auf den Bereich anwenden.

    
gmeben 19.05.2012, 14:41
quelle
1

Inline-Elemente verbrauchen keinen vertikalen Füll- und Randabstand. Du kannst die Spanne display: block machen, aber ohne mehr Details weiß ich nicht, ob das dein Ziel erreichen wird.

    
Matthew 19.05.2012 14:30
quelle
0

Das vertikale Padding, der Rand und der Rand einer Inline-Box, die nicht ersetzt wurde (z. B. span), beginnen am oberen und unteren Rand des Inhaltsbereichs und haben nichts mit der Zeilenhöhe zu tun. Bei der Berechnung der Höhe der Linienbox wird jedoch nur die Zeilenhöhe verwendet. Daher sehen Sie hier eine Überschneidung: Ссылка

Wenn Sie eine einfache Lösung verwenden möchten, können Sie die Zeilenhöhe anstelle der Anzeige verwenden: Inline-Block: Verwenden der Zeilenhöhe .

Anzeige: Inline-Block funktioniert in Safari & gt; = 2, Opera & gt; = 9, IE & gt; = 8, Firefox & gt; 3. Sie können jedoch einen Inline-Block in IE & lt; 8: Anzeige: Inline; Zoom: 1.

    
roger 19.05.2012 15:19
quelle

Tags und Links