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>
      

Run codeHide result


+3


source to share


2 answers


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;
}

      

+3


source


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>
      

Run codeHide result


+1


source







All Articles