This question already has answers here:
Why does this page scroll?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I somehow lost track of what I am doing wrong here:
I got a simple content <div>.
it has a height of 100% - 30px and a margin-top of 30px, ...so together they add up to 100% of the parent elements height.
the parent element is the body with height set to 100vh. No margins, no paddings.
However I do still get a y-scroll bar on the right. Can anyone explain to me, why that is?
I put a minimal example here to show what I mean:
https://jsfiddle.net/kemo8npa/4/
Can someone explain to me, why i get the scrollbar?
html {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin: 0;
padding: 0;
background-color: purple;
}
.content {
height: calc(100% - 30px);
margin-top: 30px;
background-color: blue;
width: 300px;
}
<div class="content">
content
</div>
edit: changed example to be more minimal.
The margin-top of .inner adds 30px outside of the element, so the sum is 100% height again.
You could use padding-top instead.
Related
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 5 months ago.
I just started learning CSS and I am having trouble understanding this. I have set both the margin and the padding to 0 (I am also using this CSS reset, so I think this is redundant - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/).
But for some reason the right side of the child box goes outside the parent. here is my CSS code. cal is the parent
#cal {
border: 5px solid black;
width: 30%;
height: 600px;
margin: 0;
padding: 0;
}
#screen {
width: 100%;
border: 5px solid black;
padding: 0;
margin: 0;
}
<div id="cal">
<div id="screen"></div>
</div>
And the result, at the right edge...
But then, when I use box-sizing:border-box, now the elements line up how I want. I don't understand why
Your child element is overflowing because you gave it a 100% with plus an additional 5px border
Solution 1 - using calc
Removing 5px from the 100%
width: calc(100% - 5px);
Solution 2 - changing the box-sizing property
Using box-sizing: border-box;
You commonly see people changing the box-sizing from content-box to border-box. This basicly makes it so the padding and border are both included in the width property.
Learn more at: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
This question already has answers here:
<html> , <body> , padding, margin, 100vh and calc()
(2 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I already reset all the margin and padding to 0.
see the codepen: https://codepen.io/geeklog/pen/zYvVeOZ
<div class="container">hello</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: pink;
}
.container {
margin: 10px auto;
background-color: orange;
}
margin: 10px auto;
Unlike paddings, CSS margins are not exactly a spacing measure when it is applied to an element inside. When you apply a margin to the elements like above, the top margin will tend to go outside of the parent element. It is just an example of the general margin collapsing behavior.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Therefore, in your code snippet, it's not only the body with the height of 100vh that you see on the screen. It also includes 10px of space right above the body element.
To resolve this issue, remove margin from .container and consider applying padding-top: 10px; to the body element instead.
because of your margin of .container
you have 2 options,
first, remove the margin of .container.
second, add overflow: hidden on body
I think the first option is better.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: pink;
}
.container {
background-color: orange;
}
<div class="container">hello</div>
Because it was minimum height, so height will be greater than 100vh. try to change min-height to max-height.
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
When addind a css of something like
#mydiv {
width: 100%;
padding: 20px;
background-color: red; /* only for visualization*/
}
<div id="mydiv" >my div<div/>
It will overflow the page.
How can I make this "100 percentage width" not overflow because of the padding?
I don't want to hide the overflow, but I want to make the width a little less than 100% but without having to hardcode some width.
Something like width: 100% - padding
Add box-sizing: border-box to the div's css
By using calc, you can remove the padding from 100%
#mydiv {
width: calc(100% - 40px)
padding: 20px;
background-color: red; /* only for visualization*/
}
<div id="mydiv" >my div<div/>
use just
width: auto;
no need to provide 100% it is by default uses full.
If div contain display property as Block no need to give width 100%, else add display property as block or flex
width:auto;
display:block;
else
display:flex;
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I have a white border around my entire website right now that I am trying to get rid of. I looked it up online and found several sources that all say to set margin: 0; but when I did this, it is not removing the white border. I suspect it has something to do with using view width and view height instead of pixels or percentages, so how can I remove the white border without changing the width and height from using the viewport size?
.container {
width: 100vw;
height: 100vh;
background: purple;
margin: 0;
}
<div class="container">
</div>
you have to set the margin: 0 property on body not on the div container, hope it helped
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: purple;
}
<div class="container">
</div>
* {margin: 0; padding: 0}
I recommend checking basic universal css boilerplate
This question already has answers here:
CSS Div width percentage and padding without breaking layout
(3 answers)
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
New to this, so apologies if I missed a crucial lesson in CSS...
I'm trying to do a simple exercise in CSS... a div within a div, both sized with percentages so they respond to a changing window size. Here's my code:
<head>
<title>Percentage Test</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#outer {
height: 100%;
width: 100%;
background-color: yellow;
}
#inner {
height: 90%;
width: 90%;
/* margin: 5%; */
background-color: blue;
}
</style>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
Everything does just what I thought; the outer div takes up the whole screen and the inner div takes up 90% of the outer div. If I add to this (i.e. add another inner div, change the percentages) everything does what I would expect. If I add a surrounding margin to the inner div (in this case, 5% but commented out), I would expect the inner div to be centered (top/bottom, left/right) within the outer div. It works for the sides and the bottom but not the top. Instead, the outer div is pushed away from the body at the top (I assume 5% but I'm not sure). Any thoughts on why this happens?
Box-sizing will include padding and borders within the widths size.
DEMO
#outer {
height: 100%;
width: 100%;
padding:5px;
background-color: yellow;
box-sizing:border-box;
}
#inner {
height: 100%;
width: 100%;
/* margin: 5%; */
background-color: blue;
box-sizing:border-box;
}
TIPS
Top margins often fail in some browsers.
Use margin-bottom or padding-top to create the vertical space.
Height 100% will not stretch to fit the outer most container without additional hacking.
The div will only be the size of it's content.
This is the way the CSS box model works by default. The dimensions of an object is the set width/height plus any borders/margin/padding.
To have any borders/margins/padding included in the specified width, use the box-sizing:border-box; setting on that element in your CSS.