Margin-top causing vertical scrowbar
My html,body, and another div called Root, all have height of 100% ( I cant use min-height the root would not expand to the full height of the parent), when i give a margin top of 2rem it causes a vertical scrowbar, i cant understand why it's causing an scrowbar or how to resolve it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="root">
<div class="margin-top-10">
Something
</div>
</div>
</body>
</html>
*, *::before, *::after{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
background-color: blue;
}
.root{
height: 100%;
background-color: aqua;
}
.margin-top-10{
margin-top: 2rem;
background-color: brown;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="root">
<div class="margin-top-10">
Something
</div>
</div>
</body>
</html>
*, *::before, *::after{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
background-color: blue;
}
.root{
height: 100%;
background-color: aqua;
}
.margin-top-10{
margin-top: 2rem;
background-color: brown;
color: white;
}
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
