Wie kann ich das beheben?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SusgUY446's Homepage</title>
<style>
body {
align-items: center;
background-color: lightgreen;
}
.account-container {
align-content: center;
background-color: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;
}
.header-1 {
align-self: center;
text-align: center;
}
</style>
</head>
<body>
<h1 class="header-1">My Homepage</h1>
<br>
<br>
<br>
<div class="account-container">
<h3>My Accounts</h3>
<a href="https://www.youtube.com/@susguy446" class="yt-link">My YouTube Channel</a><br>
<a href="https://discord.gg/Ghx5QSaft2" class="dc-link">My Discord Server</a>
<a href="https://www.roblox.com/users/3559739399/profile">My Roblox Account</a>
</div>
</body>
</html>
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Webentwicklung
Mit nachfolgendem Snippet zunächst Browser-eigene Abstände auf 0 zurücksetzen und ggf. zusätzlich das border-sizing auf border-box festlegen. Letzteres ist für die Innen- und Außenabstände nicht zwingend, jedoch nützlich beim weiteren Anpassen.
CSS:
*, *::before, *::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
Mit dem Universal-Selektor (Asterisk/Stern) sprichst du alle Elemente an und deren padding sowie margin auf null setzt. Die Regel sollte ganz oben in deinem CSS an erster Stelle notiert werden.
Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer
medmonk
17.10.2023, 09:03
@SusgUY446
Ja, noch vor dem body.
*, *::before, *::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {...}
body {...}
medmonk
17.10.2023, 09:20
@SusgUY446
Entferne die <br> Elemente und steuere die Abstände über CSS, in dem du mit padding und/oder margin einen gewünschten Abstand festlegst. Deinen Header lediglich anders verschachteln und mit CSS formatieren.
<header>
<h1>Meine Webseite</h1>
</header>
<section>
<h2>Meine Accounts</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
vor dem body{} ?