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;
}
7 Replies
If there's a margin-top of 2rem and you have a height of 100%, its height is going to be (in this instance) the height of the viewport + 2rem, so there's going to be vertical scroll
Use
and see if that fixes it
thanks for the explanation I coul understand, i tought that the would only give the space on the tome and not causing Scrow, like the padding
I tried it , still the same result
*, *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
maybe doing it with margin is the problem
the root div has a height of 100% + the margin-top-10 div has a margin top which = the document's height will be more than 100% and so there is a scrollbar
What are you trying to achieve?
If you want a space between the top of the screen and the text you can instead use padding-top
and the document's height will be 100vh
I wanted to understand, what was happening and why, with you explanations I understood so I thank for that.
Then a wanted to have some space inbetween the divs, and testing the sugestion's, and ended using padding;
it was for a bigger projet i just remade the error in the example
Glad I could help