0

I have created this simple tribute page, with fixed background image. I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page. 

<body>   <!-- applied background-image here -->
  <div class="darken">   <!-- dark overlay on the background image -->
    <div class="container-fluid">
      <div class="container main-content">    <!-- .main-content - has margin-top: 130px; applied -->
        <div class="row">
          <div class="col-lg-offset-2 col-lg-10">    <!-- Bootstrap centering -->
            <h1 class="display-1">St. Pope John Paul II</h1>   <!-- just another text below... -->
            <h2 class="display-4">Pope of the family</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-....... <!-- rest of the text -->

However - a strange thing happened - the 

.main-content {
margin-top: 130px;
}

margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!

I want to achieve two things:

  1. Having my text offset from the top of the page
  2. Having .darken class applied to the full viewport

How can I achieve this?

CodePen link

danopz
  • 3,310
  • 5
  • 31
  • 42
Selrond
  • 2,865
  • 1
  • 12
  • 9
  • Possible duplicate of [Margin on child element moves parent element](http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element) – Aziz Apr 09 '16 at 17:25

1 Answers1

1

Please try this:

Instead of margin use padding.

.main-content {
    padding-top: 130px;
}
satya
  • 1,145
  • 8
  • 12
  • @Aziz thank you! I totally forgot about them... -_- Could you tell me which two elements were collapsing their margins this time? – Selrond Apr 09 '16 at 17:26
  • The margin collapsed with all of `.main-content` parents up to the `body` tag because, according to the [CSS2 spec](https://www.w3.org/TR/CSS2/box.html#collapsing-margins): "*no line boxes, no clearance, no padding and no border separate them*". – Aziz Apr 09 '16 at 17:33
  • @Aziz that seems logical, thanks for clarification, but one thing seems ilogical - why it moved the body? does that mean that when child has bigger margin that parent, the margin "shifts" from child to parent? – Selrond Apr 09 '16 at 17:38
  • yes, it would be as if you applied the margin to the parent. You could break this by adding `overflow: auto` to the parent or use paddings for spacing internal elements and keep margins for adding space to the outer side of an element. – Aziz Apr 09 '16 at 17:41
  • My mistake, it works on the top parent excluding body/html, in your case that would be `.darken`. – Aziz Apr 09 '16 at 17:48
  • @Aziz thanks! One last question - why excluding body/html? O:) Thank you! You helped me a lot today – Selrond Apr 09 '16 at 17:50
  • According to the spec: "*Margins of the root element's box do not collapse.*" that might be why. – Aziz Apr 09 '16 at 18:00