Overlapping edges
I have it div
with 4 children. Each child has a 5px edge at the bottom. I cannot add the larger one margin-top
to the last child (or equivalently the larger one margin-bottom
for the previous child). Check out my fiddle .
I have tried adding a top border and top padding to the last child and also changing the container overflow settings with no luck. Any advice?
#header {
display: flex;
flex-flow: column;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
#header div {
padding: 0;
margin: 0 0 5px 0;
}
#blurb {
margin-top: 50px;
}
<div id="header">
<div id="greeting">
content
</div>
<div id="title">
content
</div>
<div id="subtitle">
content
</div>
<div id="blurb">
content (top margin doesn't change!)
</div>
</div>
source to share
Problem Specificity of CSS .
A selector is #header div
more specific than a selector #blurb
.
To be more precise, a selector #header div
has a specification for 0, 1, 0, 1
, whereas a selector #blurb
is 0, 1, 0, 0
.
You need to increase the specificity of the selector #blurb
if you want to override a different style.
For example: (updated example)
#header div {
padding: 0;
margin: 0 0 5px 0;
}
div#blurb {
margin-top: 50px;
}
The selector #header #blurb
will also work.
#header #blurb {
margin-top: 50px;
}
For which you can use pseudo-classes :last-child
or :last-of-type
to select the last element:
#header div:last-of-type {
margin-top: 50px;
}
source to share
If you want to set some style for the last child, use the last-child selector :
#header {
display: flex;
flex-flow: column;
height: 100%;
padding: 10% 0 0 10%;
box-sizing: border-box;
overflow: hidden;
}
#header div {
padding: 0;
margin: 0 0 5px 0;
}
#header div:last-child {
margin-top: 50px;
}
<div id="header">
<div id="greeting">
content
</div>
<div id="title">
content
</div>
<div id="subtitle">
content
</div>
<div id="blurb">
content
</div>
</div>
source to share