Issue
Codepen link for demonstration. The layout is very simple, with no absolute position or float.
* {
margin: 0px;
padding: 0px;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
position: relative;
}
main {
height: 100%;
}
section {
margin: 0.5rem;
display: grid;
height: 100%;
background-color: grey;
}<html>
<body>
<main>
<section></section>
</main>
</body>
</html>I am expecting the section to have a margin on all sides but bottom margin is not showing. Am I doing anything wrong?
One solution would be to set the height: calc(100% - 0.5rem); on section. But if I do that, what's the point of having margin-bottom style.
Solution
You can simply implement this with border 0.5rem.
*{
margin: 0;
padding: 0;
}
body {
background: yellow;
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
main {}
section {
box-sizing: border-box;
width: 100wh;
height: 100vh;
border: 0.5rem solid yellow;
background: gray;
background-color: grey;
padding: 10px;
}<html>
<body>
<main>
<section>Hello Amit Kumar!</section>
</main>
</body>
</html>Answered By - Maik Lowrey
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.