This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
The situation is:
The CSS:
<style>
#aux1{
position:relative;
background-color:#ccc;
width:100%;
height:200px;
}
#aux2{
display:block;
background-color:#F00;
width:100px;
height:100px;
margin:20px;
}
</style>
The HTML:
<html><head></head>
<body>
"...some content (div with height: auto)"
<div id="aux1">
<div id="aux2">
</div>
</div>
</body>
</html>
The problem is that the margin property from aux2 acts strange as in the following image:
If I put overflow:hidden in aux1 the result tends to normal:
Why do I even need to use overflow:hidden for the margin (especially margin-top) to act normally?
The answer is, margin collapsing as in this question: Why does this CSS margin-top style not work?
Another question reference: What is the point of CSS collapsing margins?
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How do I uncollapse a margin? [duplicate]
(5 answers)
Closed 1 year ago.
I encountered a strange behavior of nested div-blocks, which I wonder how it can be explained logically and how to avoid.
My minimalized HTML to demonstrate the behavior is as follows:
body{
padding: 0px;
margin: 0px;
background-color:gray;
}
#block1 {
height: 70vh;
width: 100vw;
position: fixed;
top: 0px;
padding: 0px;
margin: 0px;
background-color:cyan;
display: inline-block;
}
#block2{
height:40%;
background-color:green;
/* the following lines actually have no effect
padding: 0px;
margin: 0px;
position: relative;
top:0;
*/
}
#block3{
background-color:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demonstrate Strange CSS Behavior</title>
</head>
<body>
<div id="block1">
<div id="block2">
<div id="block3">Hello!</div>
</div>
</div>
<!-- This html will add a space between block1 and block2
<div id="block1">
<div id="block2">
<div id="block3"><span><p>Hello!</p></span></div>
</div>
</div>
-->
<!-- This simple space will remove it again
<div id="block1">
<div id="block2">
<div id="block3"><span><p>Hello!</p></span></div>
</div>
</div>
-->
</body>
</html>
Because there is no padding and margin the div blocks neatly overlap each other.
Demonstration with JSFiddle
When however a p-tag is wrapping the "Hello!" everything becomes strange. A space of about 10px height appears between block1 and block2.
See JSFiddle here
This behavior does not show with an inline tag such as span, but it reappears with any block child node. And even more strange, when a non-breakable space is added after block2, the space between block1 and block2 is gone.
See in this JSFiddle
How can a so distant child change the spacing between grand(grand...) parents?
Update: Having studied similar QA threads and the discussion about CSS Reset, I arrived at the conclusion that CSS margin property is buggy and better avoided.To circumvent such problems use CSS reset code and positioning.
I believe you're dealing with default browser styles. There have been several discussions around the issue of the default styling of the p tag, like here for example)
How can a so distant child change the spacing between grand(grand...) parents?
I can't answer that question, but I can suggest how to circumvent the issue: CSS Reset
This question already has answers here:
Display: Inline block - What is that space? [duplicate]
(5 answers)
Closed 8 years ago.
I got two divs
<div>abc</div>
<div>def</div>
with css as this
div{
display:inline-block;
padding:0px;
margin:0px;
}
body{
padding:0px;
margin:0px;
}
how can i remove the gap/space between first and second div
link for the same http://cssdeck.com/labs/i5oysgmt
Remove the spacing at the code level.
Write like this.
<div>abc</div><div>def</div>
div{
display:inline-block;
padding:0px;
margin-left:-4px;
}
Demo
That is because of the white space in inline-block elements
html
<div>abc</div><div>def</div>
You can read here more
This question already has answers here:
Position: absolute and parent height?
(8 answers)
Closed 8 years ago.
I have an image with absolute position image inside div tag. What i want to resize the div tag according to image if i resize the browser. My code are here:-
CSS
#parent{
width:225px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
position:absolute;
}
HTML
<div id="parent">
<img src="images/photo1.jpg" />
</div>
Actually div tag border doesn't containing an image which is absolute positioned.
Please help.
Your question is not well worded. But maybe you need something like this?:
#parent{
width:100%;
max-width:250px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
max-width:100%;
}
are you sure you need it absolute?
This question already has answers here:
css background color with floating elements
(5 answers)
Closed 6 years ago.
This is my html:
<div class="header_wrapper">
<div class="main_nav">
<div>TEst</div>
<div>TEst</div>
<div>TEst</div>
</div>
<div class="clear"></div>
</div>
As you can see I want to build a menu with floating divs. Doing so the background of main_nav disappears.
.header_wrapper{
height:129px;
background:url('images/layout/header.png') no-repeat #1f1f1f;
border-bottom:1px solid #1f66ad
}
.header_wrapper .main_nav{
position:relative;
top:77px; left:336px;
width:750px;
background:red;
}
.header_wrapper .main_nav div{
float:left;
}
.clear{
clear:both;
}
I tried to use clear:both, however the background is still gone. Any ideas why?
Adding overflow:auto; to main_nav brings the background back.
This is because floated content does not take up any space. Your parent main_div division essentially takes on a height of 0 because it has no other content, which "hides" the background (there is no height to display behind).
This information is available in the css-floating tag wiki and I've also posted other more detailed information about floating and parent containers.
Put overflow on .main_nav
.header_wrapper .main_nav div{
float:left;
overflow: hidden;
}
Your clearing div forces its parent to expand, it has no effect on its sibling's background.
You have to clear to your float DIV's parent which is .main_nav. Write like this:
.header_wrapper .main_nav{
overflow:hidden;
}
Here is my markup
CSS
body{
background-color:#353535;
}
#parent{
background-color:#eee;
}
#child{
background-color:#1b1b1b;
margin:60px auto 10px;
width:100px;
}
HTML
<div id="parent">
<div id="child">child</div>
</div>
Result: http://jsfiddle.net/W74TZ/
Margin collapsing rules. If the margin-top reaches the top of the <body> without anything conflicting ( like a padding-top:1px on #parent ) then the parent will "inherit" that.
You can avoid this by setting a padding-top:60px on #parent instead.
It's part of the CSS spec. You can read up more on this by Googling "margin collapsing", e.g. http://www.howtocreate.co.uk/tutorials/css/margincollapsing