padding + div = Allgemeine Lösung?!

[ev0lst]

Hallo,

jedem ist ja bekannt dass es Probleme bei DIV und padding zugleich gibt. Ich würde gerne eine padding Lösung für den Inhalt selber entwerfen.

Ich dachte dabei an Dinge wie

<div><p style="padding:5px">Text</p></div>

Nun die Frage ob sowas funktioniert ohne Probleme zu machen und welche Methoden es genau für solche Sachen bisher gibt die sich bewährt haben. Ich würde so gerne eine feste Klasse für diese Methode festlegen, sodass ich die Klassen (Class) z.B. so vergebe:

<div class="main"><p class="space">inhalt</p></div>

Ich hoffe ich habe es reichlich und präzise genug erklärt...

Danke

 

[Maik]

Hi,

von welchem allgemein bekannten Problem bei der Anwendung der padding-Eigenschaft auf das div-Element sprichst du?

Probleme können da ggfs. auftauchen, wenn diese mit der width- und/oder height-Eigenschaft kombiniert wird, Stichwort: Boxmodell.

Aus diesem Grund wird die padding-Eigenschaft gerne auf die Kindelemente angewendet - in deinem Beispiel ist es das p-Element.

.main .space {
padding: 5px;
}

gilt dann nur innerhalb eines Elements mit der Klasse .main, oder alternativ dazu, um die Klasse global einsetzen zu können:

.space {
padding: 5px;
}

 

[ev0lst]

Genau das mit dem "Addieren" meine ich. Ich würde es nur gerne ohne zweites DIV machen. Es muss sehr einfach funktionieren...

 

[Maik]

Ein zweites DIV ist auch nicht erforderlich, wenn der Inhalt in weiteren Elementen zur Textstrukturierung eingebettet ist, wie beispielsweise in Überschriften, Textabsätze, Listen, usw.

Für diese Elemente wird dann einfach über die Klasse .space der gewünschte Innenabstand festgelegt.

Eventuell ist noch das Abstellen des Außenabstandes erforderlich:

.space {
margin: 0;
padding: 5px;
}