CSS Abstand um das Element entfernen?
Hallo,
Also ich wollte ein header erstellen, der in html so aussieht:
<div class="versand">
<p>Versand ab 59€ Frei</p>
</div>
Nun hab ich ihm, folgende css eigenschaften gegeben:
.versand {
color: white;
text-align: center;
background-color: black;
width: 100%;
height: 50px;
}
Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?
LG
2 Antworten
Jedes Element erhält vom Browser Standardwerte für die Innen- und Außenabstände (padding und margin). Um das zu beheben, kasst du diesen Wert durch eigene CSS-Regeln überschreiben.
/* Global für alle Elemente zurücksetzen */
*, *::before, *::after {
padding: 0;
margin: 0;
}
/* Nur für einzelne Elemente zurücksetzen */
p {
padding: 0;
margin: 0;
}
Wenn das Element immer noch einen Abstand nach oben hat, die Entwicklerwerkzeuge deines Browsers aufrufen und die Elemente untersuchen. Schau also nach, durch welches Element der Abstand nach oben verursacht wird.
Ich würde zudem die fixe Höhe des <p> Elements entfernen, da diese wenig Sinn ergibt. Statt der fixen Höhe mit font-size und ggf. line-height arbeiten. Das horizontale und vertikale zentrieren würde ich zudem über Flexbox lösen.
/* Flexbox - vertikal und horizontal zentrieren */
.versand {
display: flex;
justify-content: center;
align-items: center;
}
.versand p {
background-color: white;
color: white;
}
weil p und body ein padding hat . schau in deinem browser in der entwickler console , dort kannst du dir zu jedem element die default werte ansehen die dein browser schon mitgibt .
p {
padding:0;
margin:0;
}
und schon hast du nirgends irgendein abstand
und immr daran denken der body selber hat noch 5pixel abstand
body{
padding:0;
margin:0;
}
auf der x achse kannste
text im p tag kannste mit
text-align:center;
mittig bekommen solange das p tag die ganze zeile einnimmt .
sonst geht auch noch sowas wie
margin:0 auto;
dann muss aber auch das div die ganze seite überspannen .
y wäre ja mitt auf der browser ansicht , das ist etwas komplizierter da du erstmal 100 höhe in deinem dokument haben müsstest .
das geht mit
positon:absolut;
top:50%;
left:50%;
oh noch was gefunden
body {
display: flex;
justify-content: center;
align-items: center;
}
wobei man dort dann
height:100%
haben müsste.
ach wirst schon was finden im internet .
Ok, danke. Und wie kriege ich jetzt den text Mittig von der y-Achse her?