Martin Martin - 6 months ago 9
HTML Question

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

I believe that the issue I am having is related to

margin
s 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>




Answer

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>