Padding in div sorgt für ungleiche Innenabstände

[Mr. Brooks]

Hi,

wenn ich das hier verwende

<div style="background-color: #f7efe3;>
<p><span style="font-weight:bold;">fetter text</span></p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>

wird der Text ohne Abstand direkt an den Rand geklebt. Damit

<div style="background-color: #f7efe3; padding: 0.5em">

habe ich rechts und links den gewünschten Rand, aber oben und unten das doppelte. Der Rand oben/unten ist aber nur da, wenn ich irgendwelche Padding-Werte einsetze, ohne Padding gibt es keinen Abstand.

Er scheint hier noch einen anderen Abstand drauf zu addieren. Kommt der vom <p>? Wenn ich da alles auf 0em setze ändert sich nichts.

 

[netzgestaltung]

der browser gibt dem P automatisch einen margin-top/bottom. der wird erst sichtbar wenns oben/unten ein padding gibt, sonst lappt der unten raus.

du könntest alle Browser-Stile mit

*{margin:0;padding:0;}

deaktivieren und dann nochmal schauen.

oft auch gesehen ist ein padding-top/bottom 1px. damit wirkt das default margin und es passt oft schon.

 

[chr1zZo]

Ist das überhaupt noch Zeitgemäß? Kannst du ein CSS Bootstrap nutzen?

 

[netzgestaltung]

Ist das überhaupt noch Zeitgemäß?

wenns im browser läuft, warum nicht?
ein bootstrap macht 2 mio dinge die oft nicht verstanden werden oder konktraproduktiv sind. die würde ich nur einsetzen wenn ich auch weis was die machen. mir machen die jedenfalls immer zu viel, ich bin mittlerweile eher bei einfachen resets: https://www.kinderlandwien.at/wp-content/themes/sandbox/css/normalize.css

hier gibts auch eine weiterentwicklung vom autor: https://hankchizljaw.com/wrote/a-modern-css-reset/

 

[Emanon]

Wenn Du nur padding angibst - macht er auch rundherum um dieses "Objekt" padding. Also oben, unten, rechts und links.
Grenze es auf padding-left ein.
Persönlich würde ich mit einem css-file und class arbeiten - ist sauberer und leichter im Nachhinein zu bearbeiten.

 

[68000]

Benutzt du die Dev-Tools des Browsers? Dann kannst du bereits im DOM Elemente manipulieren.

 

[DaysShadow]

@Mr. Brooks Auf jeden Fall die Dev Tools des Browsers nutzen wie @68000 zeigt. Damit siehst du was gesetzt wird und du siehst auch, welche CSS Attribute von wo kommen bzw. überschrieben werden. Habe erst kürzlich eine Seite von Hand geschrieben (zum Lernen) und hatte Ewigkeiten nichts von Beginn an mit HTML und CSS gemacht, nur immer mal Seiten flicken an der Arbeit, die Tools sind ein wahrer Heilsbringer

 

[sandreas]

wenns im browser läuft, warum nicht?
ein bootstrap macht 2 mio dinge die oft nicht verstanden werden oder konktraproduktiv sind. die würde ich nur einsetzen wenn ich auch weis was die machen. mir machen die jedenfalls immer zu viel, ich bin mittlerweile eher bei einfachen resets: https://www.kinderlandwien.at/wp-content/themes/sandbox/css/normalize.css

hier gibts auch eine weiterentwicklung vom autor: https://hankchizljaw.com/wrote/a-modern-css-reset/

Das beste "Normalize"-CSS, was mir bisher unter gekommen ist, ist https://github.com/necolas/normalize.css/. Ein paar mehr habe ich hier verlinkt:

https://pilabor.com/blog/2021/03/html-and-css-tricks/#normalizecss

Aber deins ist auch nicht schlecht, vielen Dank - da hat man noch einen Vergleich :-)

 

[netzgestaltung]

ah ok, da sind schon recht viele stile drin, dafür hab ich ggf noch ein default.css, auch je nach CMS unterschiedlich. früher hab ich das normalize.css von der html5boilerplate genutzt - das war eh das necolas -, aber ich glaube so viele browser unterschiede gibts nun nicht mehr.

 

[floq0r]

die Tools sind ein wahrer Heilsbringer

Besonders wenn man die Devtools gleich mit dem Dateisystem connected und die Styles die man editiert gleich in den CSS files gespeichert werden. Ich style nur mehr so.

 

[owned139]

html, body {
    padding: 0;
    margin: 0;
    border: 0;
}

 

[DaysShadow]

@floq0r Wieder was gelernt, danke!

 

[Skandaloes]

Besonders wenn man die Devtools gleich mit dem Dateisystem connected und die Styles die man editiert gleich in den CSS files gespeichert werden. Ich style nur mehr so.

Ich nutze auch schon eine weile die Devtools zum kontrolieren, aber wie man da direkt in CSS speichern kann usw. raff ich irgendwie nicht. Hast Du da ggf. einen Hinweis für mich, bezogen auf den Firefox?

 

[floq0r]

In Bezug auf FF hab ich noch nichts davon gelesen, weiß nicht ob der es auch kann.
Zu Chrome: https://datacadamia.com/web/chrome_workspace
Immer auf den kleinen grünen Punkt achten, manchmal funktioniert das linking nach einem refresh nicht und man "arbeitet ins Leere".
Weiterer netter Effekt: Changes die beispielsweise in Notepad++ gespeichert werden werden von Chrome live übernommen, darunter nicht nur CSS formatting sondern auch JS code.

 

[Skandaloes]

Perfekt, ich danke Dir. Dann mach ich das mit Chrome.
Besten Dank!

 

[netzgestaltung]

FF kann das speichern auch. Ich nutze das aber nicht weil ich mich nicht gewöhnen konnte. Stattdessen hab ich das Plugin "CSS Reloader" installiert. Nach so einem CSS reload muß auch manchmal das DOM element nochmals ausgewählt werden.