Whenever I add margin to any element I get overflow, I tried adding box-sizing, position:relative. but nothing works
searched on google but nothing seems to help me
can anyone know why is this happening?
Sample Image
The margin is outside the element. One way to deal with it is to use calc on width as in the following snippet.
And note that margin is diferent from padding: paddingis inside the border (so it is included in the area covered by the background color), margin is outside:
.x {
box-sizing: border-box;
margin: 30px;
width: calc(100% - 60px);
background: yellow;
border: 5px solid red;
}
<div class="x">margin....</div>
With padding instead of margin, this would be:
.x {
box-sizing: border-box;
padding: 30px;
width: 100%;
background: yellow;
border: 5px solid red;
}
<div class="x">Padding....</div>
You can't add margin to a div that is a sibling of your container or else it'll create an overflow. Use padding instead. See how the text in the margin example shifts the text.
.parent {
width: 100px;
height: 100px;
background: red;
}
.padding-example {
padding: 10px;
}
.margin-example {
margin: 10px;
}
<div class="parent">
<div class="padding-example">Correct</div>
</div>
<hr>
<div class="parent">
<div class="margin-example">Wrong</div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
CSS: Width in percentage and Borders
(5 answers)
Closed 1 year ago.
I have this html
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
i wanted this boxes to be in the same row and they to be equal. So i setted the parent div to be 100% width, and inside my items to be 33.%.
So 3 x 33.3 = 99.9.
.parent {
width: 100%;
border:1px solid blue;
}
.box {
width: 33.3%;
border: 1px solid red;
display: inline-block;
}
body {
margin: 0px;
padding: 0px;
}
That should pass inside the parent which takes 100% width of the whole window.
But the box number 3 gets down instead next to box number 2. Why is that ?
Give the Parent box a font-size of 0. The white space between each inline-block div is causing the last one to go to the next line. Be sure to give the inline-block divs each their own regular font-sizes though so any text they have isn’t invisible.
Also, make sure the inline-block divs have “box-sizing:border-box” so that their borders are included in the 33.3% width
Basically, this:
.parent {
width: 100%;
border:1px solid blue;
font-size: 0px;
}
.box {
width: 33.3%;
border: 1px solid red;
display: inline-block;
box-sizing: border-box;
font-size: 16px;
}
You can add box-sizing: border-box to your .box div so that the 1px borders are included in the width:
.box {
width: 33.3%;
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
}
You have added several other bits to the widths of your elements. The borders will add 2px.
Also browsers add their own default settings for margin/padding.
You will often see at the top of CSS stylesheets:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
This tells the browser not only not to add its own styling but also if styling is added further down the cascade that padding and border widths should be included in the width of an element. So for example if you set a width at 100px and then add some padding to it it will still have width 100px. This can make calculating how much space is actually being taken up somewhat easier.
However, there is one more thing in the case of inline-blocks - if there is whitespace between them in the layout the browser will add a (small) whitespace between them in laying them side by side. I don't know what the ultimate recommended way of getting rid of this might be (there's lots of options if you search). This snippet just gets rid of the whitespace in the HTML text so it doesn't arise.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.parent {
width: 100%;
border: 1px solid blue;
}
.box {
width: 33.3%;
border: 1px solid red;
display: inline-block;
}
body {
margin: 0px;
padding: 0px;
width: 100vw;
}
<div class="parent"><div class="box">1</div><div class="box">2</div><div class="box">3</div>
</div>
a better way to do this is using flex.
#parent{
display:flex;
border:solid 1px red;}
.box{
width:33.3%;
border:solid 1px black;
text-align:center;}
<div id="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
Here is a simple block of code:
<style type="text/css">
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
}
</style>
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
But, the results are different when viewed in different screen widths.
Here, the child div completely fits the parent div at a certain screen width.
But here, when at a different screen width, a white space of about 1px appears on both the sides of the child div.
How can I get rid of this white space and make sure that the child div completely fits the parent div?
The issue lies with the border you've used and the way browsers handle this. Setting the box-sizing to border-box solves this issue. It's a common one but once you know it you'll be able to better spot it.
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
margin: 0;
}
<!DOCTYPE html>
<div class="parent">
<div class="child"></div>
</div>
Also, you don't need to define text/css in your tags these days, browsers know what the code is. Also try not to use it inline unless it was just for this question. Similarly, the <center> tag has been depreciated which means it's no longer supported in HTML 5 so you should center things using margin or flex. Margin is the easiest so that's why I've added that here.
Sometimes browsers will treat things differently in quirks mode too, so make sure you have a doctype declaration.
This is because you are using Chrome browser.
I have the same behavior with the very simple code:
<div class="container">
<div class="item-a">item A</div>
</div>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
width: 500px;
height: 500px;
border: 5px solid black;
background-color: cornflowerblue;
}
.item-a {
width: 300px;
height: 140px;
background-color: orange;
border: 3px solid crimson;
}
At 100% zoom it has a gap. When I zoom, the gap disappears, but when I zoom again - the gap between container and item-a may or may not show up again (you can notice cornflower background of 1px between a parent and child borders).
This is how Google Chrome handles things in both Linux and Windows 11 at the moment.
Then I gave a shot to view the same code via Firefox and there is no gap regardless of zooming.
Contrary to the many answers suggesting to set box-sizing: border-box, I used content-box instead and it fixed my issue: box-sizing: content-box
Try set child with the same width: 75vw;
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 75vw;
height: 100px;
background-color: #999;
}
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
I have a child element (h1 in my example) inside a parent div.
Why does the margin of the child appear to be outside of the parent.
The example below:
The child has a padding of 30px and a red border round it as expected.
The div has a yellow background but I expected it to be of height 100 + 30 + the h1 + 30 + 100.
div {
background-color: yellow;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
Interestingly if I put a border round the div as in the example below - it behaves as I expected. I know I can work round this, but I would like to know what is going on?
div {
background-color: yellow;
border: 5px solid green;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
It's "margin collapsing" which can seem confusing at first.
I recommend you read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
This can be fixed by applying display: inline-block on the div or the h1. However, I highly recommend using padding on the div in this case, that should solve the problem permanently.
Empty blocks: If there is no border, padding, inline content, height,
or min-height to separate a block's margin-top from its margin-bottom,
then its top and bottom margins collapse. Ref
You can use the outline css property for consistent behavior.
div {
background-color: yellow;
outline: 5px solid green;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
When you set the border that means you are telling the DIV container it's boundary.
you have to assign the widths and floats.
float: left;
width: 100%;
Right now the DIV is starting from top. But showing background from the mid.
div {
background-color: yellow;
padding:100px;
}
h1 {
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
Or this
div {
background-color: yellow;
padding:1px;
}
h1 {
margin:100px;
padding: 30px;
border: 5px solid red;
}
<div>
<h1>Child</h1>
</div>
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example
I am getting a little gap between child-div and its parent-div. Is it possible for child-div to on its parent-div height? or (the way around)possible if the parent-div can scope the height of its child-div for not to overlap or get some extra spaces.
I have a DOM like this:
<div class="parent-div">
<div class="parent-image">
</div>
<div class="child-div">
</div>
</div>
here is my CSS:
.parent-image:{
height:60px;
}
.parent-div{
border: 1px solid #E3E3E3;
border-radius: 4px 4px 4px 4px;
margin-bottom: 20px;
width: 100%;
}
.child-div{
????
}
If you specify height: 100%; it will take the height of the parent.
If your child has padding, you need to change its box-sizing.
.child {
padding: 10px;
box-sizing: border-box;
}
If your child has more content than the parent, you either need to tell it to scroll, or hide. Note that on some browsers the scroll-bar will be inside the div, and on other browsers, it'll be on the outside.
.parent.c .child {
overflow: auto;
}
or
.parent.d .child {
overflow: hidden;
}
Demo of All
In your CSS, you can set your child-div to:
.child-div{
height:100%;
}
Here is a demonstration: http://jsfiddle.net/Xq7zQ/