CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 1765

CSS: margin-top collapsing

My caveat is I'm not a web designer, I'm a technician.

I want the following CSS to apply, but it looks like there is a margin collapse going on:

.site-info .site-title {
    margin-top: 1em;
}

JSfiddle: here.

HTML:

<div class="site-info"> <span class="site-title">© 2016 <a href="#" rel="home"><strong>Non-Web Designer</strong></a></span>
  <div class="menu-footer-menu-container">
    <ul id="menu-footer-menu-2" class="menu">
      <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-71"><a href="/">Home</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="/about/">About</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="/privacy-policy/">Privacy Policy</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="/contact/">Contact Me</a></li>
    </ul>
  </div>
</div>

CSS:

.site-footer {
    margin-top: 0;  
}
.site-footer .site-title::after {
    content: " ";
}
.site-info {
    border-top: 1px #9b998b solid;
    padding: 1px;
}
.site-info .site-title {
    margin-top: 1em;
}
.site-info a {
    color: #686868;
}
#site-navigation .menu-footer-menu-container {
    float: none
}
.menu-footer-menu-container {
    float: right;
    line-height: 1.25;
    padding-top: 3px;
}
.menu-footer-menu-container ul {
    margin: 0;
  padding: 0;
}
.menu-footer-menu-container ul li {
    display: inline-block;
    padding: 1em;
}
footer .menu-footer-menu-container ul li {display: inline-block; padding: 1em;}
.menu-footer-menu-container ul li:hover {background-color: #E7E3D2;}

I've added a border and padding to the parent container (which I thought was the solution to the border collapse issue:

.site-info {
    border-top: 1px #9b998b solid;
    padding: 1px;
}

but the issue remains.

Help appreciated!

Upvotes: 2

Views: 115

Answers (6)

Jainam
Jainam

Reputation: 2660

You can try " float:left; " in this class " .site-info .site-title " .

.site-footer {
    margin-top: 0;  
}
.site-footer .site-title::after {
    content: " ";
}
.site-info {
    border-top: 1px #9b998b solid;
    padding: 1px;
}
.site-info .site-title {
    margin-top: 1em;
  float: left;
}
.site-info a {
    color: #686868;
}
#site-navigation .menu-footer-menu-container {
    float: none
}
.menu-footer-menu-container {
    float: right;
    line-height: 1.25;
    padding-top: 3px;
}
.menu-footer-menu-container ul {
    margin: 0;
  padding: 0;
}
.menu-footer-menu-container ul li {
    display: inline-block;
    padding: 1em;
}
footer .menu-footer-menu-container ul li {display: inline-block; padding: 1em;}
.menu-footer-menu-container ul li:hover {background-color: #E7E3D2;}
<div class="site-info"> <span class="site-title">© 2016 <a href="#" rel="home"><strong>Non-Web Designer</strong></a></span>
  <div class="menu-footer-menu-container">
    <ul id="menu-footer-menu-2" class="menu">
      <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-71"><a href="/">Home</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="/about/">About</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="/privacy-policy/">Privacy Policy</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="/contact/">Contact Me</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Pete
Pete

Reputation: 58432

You could use padding-top instead of margin-top:

.site-info .site-title {
    padding-top: 1em;
}

But you would also need to make your span an inline-block or block element so that the padding applies:

.site-title {
    display: inline-block;
}

Upvotes: 1

Franc
Franc

Reputation: 5496

"span" is an "inline" element, which means that it will not be bothered by your margin. You can either change

<span class="site-title">...

Into:

<div class="site-title">...

Or set a css property to make it behave like a block element:

.site-title{
    display: block;
    margin-top: 1em;
}

Upvotes: 1

Kylar
Kylar

Reputation: 424

if you change your css to:

.site-info .site-title{
    display:block;
   .margin-top:1em;
}

it will work

Upvotes: 0

Jinu Kurian
Jinu Kurian

Reputation: 9416

Give inline-block to the element. By default display: inline was applied to the element. That's why the element didn't respect the margin .

Or you can use padding instead.

.site-info .site-title {
    margin-top: 1em;
  display: inline-block;
}

See this FIDDLE

Upvotes: 1

GMchris
GMchris

Reputation: 5648

Consider using the padding-top property, unless you're applying a different background-color to one of them, it should work for you. Alternatively only use padding-top for the parent.

Upvotes: 1

Related Questions