The border of the outer element affects the display of the margin of the inner element, why?
I guess I got it kind of, now I have a different problem that I don't understand. I have a div with id = "signin" that is inside the other 2 divs. These 2 divs don't have any padding or borders, and when I apply margin-top to the div with id = "signin", now it doesn't create any extra white space above. Why is this? Can the div next to the div with id = "signin" affect it in any way?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body {margin: 0px;}
#top-bar {
background-color: #690203;
height: 40px;
}
.fixed-width {
width: 950px;
margin: auto;
}
#logo {
float: left;
}
#logo img {
border-right: 2px solid #752124;
padding: 9px;
}
#signin {
float: left;
width: 200px;
margin-left: 15px;
margin-top: 10px;
border: 1px solid deepskyblue;
}
</style>
</head>
<body>
<div id="top-bar">
<div class="fixed-width">
<div id="logo">
<img src="images/logo.png" width="20">
</div>
<div id="signin">
<!--<img src="images/signin.png" width="13">-->
<span>test test</span>
</div>
</div>
</div>
</body>
</html>
I recently started learning css and ran into a problem that I cannot figure out. I have one div nested inside another and when the outer div has a border then using a margin with the inner div causes the inner div to move inside the outer div, which I thought should work. However, when the outer div does not have any border, then using a margin with the inner div causes the outer div to move and also creates some space above it. Please take a look and try to explain why this is the case. Thank.
with border in #bigger
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
border: 1px dashed black; /* border I use or don't use with the outer div */
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>
no border in #bigger
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>
source to share
This is because CSS uses collapsing margins .
This link will explain it much better than I do, so I would recommend giving it a read, but give you a quick summary:
The margin in CSS is meant to be displayed outside the element. This behavior becomes a little grim when dealing with elements within other elements, as the margin can be viewed outside the child in both cases, whether it is in the parent or outside the parent. It was determined that the margin would always tend to be outside of all parent elements, unless that parent had a style that prevented that logic from being true. For example, if the parent has a border, it now has something above it that separates the child from the outside world, which means that the child margin must be owned inside the parent. If not, then there is no split, so the child margin comes out.
If you want to always have a marker inside the parent, your best bet might be to apply padding to the parent instead of margins on the child.
source to share