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>
Related
I am facing problem with the borders of div and h2. I tried everything to remove the little space at the bottom of
h2 but failed. Also, I wish that the border of h2 overlap the border of div.
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 80%;
margin: 0 auto;
margin-top: 100px;
border: 2px solid black;
}
div h2 {
border: 2px solid black;
}
</style>
</head>
<body>
<div>
<h2>Level 2 Heading</h2>
</div>
</body>
</html>
I noticed that problem occurs based on the zoom in or zoom out. If you zoom in the problem will disappear if you zoom out it will happen again. But anyway.
if you use the property outline instead of border for the div the problem will disappear at all screen sizes. More info about outline property
CSS I changed
div {
width: 80%;
margin: 0 auto;
margin-top: 100px;
outline: 2px solid black;
}
div h2 {
border: 2px solid red;
margin: 0;
}
Or you could just give the container div border of 4px if you want it that thick and remove the h2 border completely and the opposite is correct.
I am trying to fix a padding issue where I apply padding to he parent container, like this:
css:
.main {
width: 100px;
border: 1px solid #000;
background-color: #b0bfc6;
height: 300px;
padding: 20px
}
.m1 {
color: #000;
background-color: #fff;
margin-top:20px;
}
.m2 {
color: #000;
background-color: #fff;
margin-top:20px;
}
my html:
<div class="main">
<div class="m1">some content
</div>
<div class="m2">some content
</div>
</div>
The problem is when I apply padding to the "main" class div the selection background get padded as well as shown in fiddle:
http://jsfiddle.net/btjpk5f0/7/
Is there a way where I could apply padding to the parent container, but still be able to stretch the selected background color to be the full width of the container?
Thanks!
Is there a way where I could apply padding to the parent container,
but still be able to stretch the selected background color to be the
full width of the container?
No, not really.
Do you have to apply padding to the parent container? You could apply the padding to the child divs, like so:
.main {
width: 140px;
border: 1px solid #000;
background-color: #b0bfc6;
height: 300px;
padding: 0 /* No padding here*/
}
.m1 {
color: #000;
background-color: #fff;
margin-top:20px;
padding:0 20px /* left/right padding here */;
}
.m2 {
color: #000;
margin-top:20px;
padding:20px /* apply padding here instead of on the parent */;
}
http://jsfiddle.net/er9ubxo8/1/
That gives you the desired layout ....
A negative margin could help.
.main > div {
margin-left:-20px;
margin-right:-20px;
}
http://jsfiddle.net/btjpk5f0/5/
[EDIT:]
You cannot stretch the background without enlarging the div, but you may add the same padding to inner elements:
.main > div {
margin-left:-20px;
margin-right:-20px;
padding-left:20px;
padding-right:20px;
}
Look here: http://jsfiddle.net/btjpk5f0/11/
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>
As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
Use a padding in the green container instead of a margin on the orange element.
Use padding instead of margin:
.body .container {
...
padding-top: 30px;
}
Not sure if this will work in your case, but I just solved this with the following CSS properties
#element {
padding-top: 1px;
margin-top: -1px;
}
#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
You read this document:
Box model - Margin collapsing
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
Not sure how hackish this sounds, but how about adding a transparent border?
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/