Why will my margin-top CSS not work in this case?

Question

I believe that the issue I am having is related to margins not collapsing on a div that is inside another div but I may be wrong.

I am hoping someone can push me in the right direction on this.

Here is a small snippet of the code from the page I am working on:

.space25 {
  margin-bottom: 1.563em;
}
#menu {
  text-align: center;
  color: white;
  margin-top: .9375em;
  margin-bottom: .9375em;
}

<div id="page-wrap">
  <div id="header">

    <div id="logo">
      <img src="logohuge2.png" width="750px">
    </div>

    <div id="menu">
      <h5><span class="btn">CURRENT WORK</span> <span class="btn-active">PRICING</span> <span class="btn">CONTACT</span></h5>
    </div>

  </div>

  <div id="mediumtitle" class="25space">
    Basic Packages</br>
    </br>
  </div>
</div>

dippas · Accepted Answer · 2016-05-17T16:31:57.077

6

because your class in CSS is different than your class in HTML

you have this:

<div id="mediumtitle" class="25space">

but then you have in CSS

.space25 {
    margin-bottom: 1.563em;
}

Notes

A class can't never start with a number
Don't use width html tags, instead use CSS to style img
</br> is invalid, the valid should be <br> or <br/>, but avoid using <br /> in content, instead use margin or padding depending oh the case

Snippet

.space25 {
  margin-bottom: 1.563em;
}
#menu {
  text-align: center;
  color: white;
  margin-top: .9375em;
  margin-bottom: .9375em;
}
img {
  width: 750px
}

<div id="page-wrap">
  <div id="header">
    <div id="logo">
      <img src="//placehold.it/750x300" />
    </div>
    <div id="menu">
      <h5><span class="btn">CURRENT WORK</span> <span class="btn-active">PRICING</span> <span class="btn">CONTACT</span></h5>
    </div>
  </div>
  <div id="mediumtitle" class="space25">
    Basic Packages
  </div>
</div>

edited May 17 '16 at 16:31

answered May 17 '16 at 15:13

dippas

58,591
15
114
126

You are right. I did have the class swapped. I did change it because I seemed to remember that class names cannot start with numbers. That being said, when I am setting the top margin for the menu DIV, is it pushing the margin against the logo DIV or is it pushing its margin against the top of the view? I made the changes and it seems to be working. It seems to be in fact pushing against the menu DIV above it. – Martin May 17 '16 at 15:20
That's because you a `h5` which has default `margin`, if you want a `menu`, use the correct semantics for that, using `ul` and `li` – dippas May 17 '16 at 15:25
Ahh Yes I guess I should use a list and style that appropriately. – Martin May 17 '16 at 15:35

score 2 · Answer 2 · edited May 23 '17 at 11:52

2

A class name shouldn't start with numerics, see here an explanation of why : https://stackoverflow.com/a/449000/6028607

So, with .space25 instead of .25space, it works fine.

See this fiddle

edited May 23 '17 at 11:52

Community

1
1

answered May 17 '16 at 15:18

Vincent G

8,547
1
18
36

Why will my margin-top CSS not work in this case?

2 Answers2

Notes

Snippet