This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why is adding or removing a border changing the way margins work?
(1 answer)
Closed 2 years ago.
I was playing with css:
<body >
<div style="background-color:lightblue;">
<div style= "margin-bottom : 40px;">This is some text in a div element</div>
</div>
<div style="background-color:red;"> hdjj</div>
</body>
This code make the div tag to be away from second div and not from child div Why is it so?
It's due to margin collapsing. Margin collapsing simply means that if any element comes after another or inside another being first or the last element inside then the margin (top or bottom) touching with other element or parent will just collapse inside the other one's or parent's margin and simply the bigger margin will win. In this case, the child has a bottom margin collapsed with margin of parent and it all results in a case that the child doesn't have a margin but parent, but as soon as you apply border, the margin of child gets prohibited from collapsing with parent since the border comes in-between.
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 7 months ago.
<div style="background-color: #666">
<div style="margin: 20px">Some Content - no border</div>
</div>
However, if I add a border, background color is applied to the whole content including child element's margin:
<div style="background-color: #666; border: 1px solid">
<div style="margin: 20px">Some Content - has border</div>
</div>
What's the reason for this behavior? What's the specification explains this?
Since the parent Div is Empty, and the Child should have a distance to the border of the parent element, no background is shown in the margin. If you use Padding or a Border, you extend the area of the Child element to that border.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I'm Coding a sign in/sign up website, the css is very basic at this time along with basic js (I plan on polishing css). But I want to get the basic css done before working on html, one element of my website is an h3 element that I want to have a margin that pushes from the bottom of one of the selection divs but the margin is pushing from the top of the body rather than the containing div.
<div id="container">
<div id="leftFloat" class="50%">sign in</div>
<div id="rightFloat" class="50%">sign up</div>
<div id="rightFloat" class="50%">
<h2 id="selection" class="margin: 50px;">Pushes the container down rather than pushing itself down</h2>
</div>
</div>
This is what i want When Using The Margin
This is what i get when using the margin
Use clear:both for h2 as shown below:
h2{
clear: both;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I have an image of 24x24 px inside an <a>, which is nested in a <div> having min-height:50px.
The bottom and top paddings of <a> element are 13px both.
So, height should be 24px(image height) + 13px(<a> padding-top) + 13px(<a> padding-bottom) = 50px right?
The problem is that the wrapper <div> is expanding its height to 54px, except when I define the vertical-align:middle for that image, then It's resized to 50px as desired.
Here is the code http://codepen.io/thyagosic/pen/JKYrjN
Removing the vertical-align: middle; may help to understand the problem
All images are inline elements by default and they have 4px space at the bottom. You should set 'vertical-align:top' or 'display: block' on them to remove this space.
I recommend putting images inside of links into divs (or setting display: block to the element)
<div class="menu">
<a href="#">
<div id="image">
<img src="http://xamlspy.com/Media/Default/Logo/XamlSpy.24x24.white.png" alt="" />
</div>
</a>
</div>
Also padding/margin should be set for "block" elements
Basically I have a wrapping <div> mean to add a border around something. It has a padding of 19px. Inside that wrapping <div> I want to insert pretty much any kind of content. Currently, it has another <div> inside. The problem is that that internal <div> has a bottom margin of 20px, so there is a space of 39px between the end of the internal <div> and the border, which just looks awkward.
As far as the question is concerned the relevant code is just
<div style="padding: 19px;">
<div style="margin-bottom: 20px;"></div>
</div>
I just want to know how I can make the margin of the inner div overlap the padding of the outer div (or alternatively be set to zero by CSS acting on the class of the outer div).
Is there a way to make the bottom margin of the last item in the wrapper overlap with the padding? Alternatively, could I simply set the margin of the last child of the wrapper to 0px?
I actually figured out a way that seems to work for the alternative option (setting the bottom margin of the last child of the wrapper to 0px). Here's the relevant CSS where "callout-box" is the class of the wrapper.
.callout-box > :last-child {
margin-bottom: 0px;
}
I'm still curious if there's a way to actually cause the margin and padding to overlap without removing the margin. In this case, there is a 1px difference since the solution I just gave sets the spacing to 19px whereas overlapping the margin and padding would give 20px.
I just want to know how I can make the margin of the inner div overlap the padding of the outer div (or alternatively be set to zero by CSS acting on the class of the outer div).
Answer:
Very simple just add negative top margin. Look at the code below.
<div style="padding: 19px;">
<div style="margin-bottom: 20px; margin-top:-19px;">Inner Div</div>
</div>
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>