Why Does This CSS Margin-Top Style Not Work

Why does this CSS margin-top style not work?

You're actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.

Here are the relevant points from the W3C spec:

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse [...]

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

no line boxes, no clearance, no padding and no border separate them

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child

You can do any of the following to prevent the margin from collapsing:

Float either of your div elements

Make either of your div elements inline blocks

Set overflow of #outer to auto (or any value other than visible)

The reason the above options prevent the margin from collapsing is because:

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

Margins of inline-block boxes do not collapse (not even with their in-flow children).

The left and right margins behave as you expect because:

Horizontal margins never collapse.

CSS margin-top not working

<span> elements have a default display property of inline. inline elements are not affected by margins or paddings, amongst other things.

Just give .form_head a display:block or display:inline-block.

.form_head {
    margin-top: 20px;
    color:#58585a;
    font-size:22px;  
    display:block; /* Add this */ 
}

More reading:
The difference between "block" and "inline"

What’s the Deal With Display: Inline-Block?

Margin-top not working for p and a tag?

This issue is known as Margin Collapse and happens sometimes between top and bottom margins on block elements.

The margins of adjacent siblings are collapsed

That's why the margin doesn't work on the p tag. To make it work here an option is to use padding-top on the p tag.

And on the a tag the margin doesn't work because it's an inline element. You may need to change its display property to inline-block or block.

margin-top is not working

The anchor element <a> is an inline element. Change its display type to inline-block or block:

#corner-slider {  position: fixed;  z-index: 10000;  overflow: hidden;  border-radius: 15px;  color: white;  padding: 10px;  margin-bottom: 60px;  height: 120px;  width: 369px;  border: 1px solid #2d93f1;  background: #2d93f1;}
#corner-slider.hidden {  display: none;}
#corner-slider .close {  position: absolute;  cursor: pointer;  font-size: 16px;  display: inline-block;  z-index: 1002;  right: 24px;  top: 10px;}
.popup-button {  padding: 8px 30px;  background-color: #ffffff;  border-color: #ffffff;  border-radius: 45px;  display: inline-block;  margin-top: 1em;}

<div id="corner-slider">  Do you want to stay here?  <br />  <a target="_blank" href="#" class="popup-button">Click me!</a></div>

Margin-top value not being applied

Replace <container> by a <div> and your margin can apply. The reason is as <container> is not a valid HTML markup, the browser do not know how to display it and ignores it.

<div class="universal-header">
    <div class="header-top">
        <div class="social-media">
            <i class="fab fa-youtube-square" style="font-size: 2.5rem"></i>
            <i class="fab fa-instagram" style="font-size: 2.5rem"></i>
            <i class="fab fa-facebook" style="font-size: 2.5rem"></i>
            <i class="fab fa-pinterest" style="font-size: 2.5rem"></i>
            <i class="fab fa-twitter-square" style="font-size: 2.5rem"></i>
        </div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Stories</a>
            <a href="#">Travel Resources</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Shop</a>
        </nav>
    </div>

    <h1>Black Diasporer</h1>
</div>

Custom HTML elements in browser are handled as web components, and I guess this it not what you were trying to do.

common class - css margin-top is not working

You need to remove 'position: absolute;' The margin doesn't work with 'position:absolute'

Use below code

.cl{
display: inline-block; 
width: 100px;
height: 100px;
border-radius: 4px;
background: #6686a7;
margin-top:150px}

Margin top not working properly when position fixed with javascript

when you give position: fixed property, you need to use top: 50px instead of margin-top: 50px, because, when you use fixed, it is relative to the screen and not to the parent div.

Since the navbar is fixed there is no element on top of the image, so it is going up, you need to use heightOfFixedNavbar + marginTop to the image.

Margin-top doesn't work as intended

What you're seeing is called "margin collapse." https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Parent and first/last child - If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

You can address it a number of ways. One way is by using overflow:hidden; on the parent element .outter. You could also use padding-top: 50px on .outter instead of margin-top on .inner

html,body {  padding:0;  margin:0;}body {  background:#777;}.outter {  background:#099;  text-align:center;  overflow: hidden;}.inner {  background:#ff0;  width:400px;  height:150px;  margin:0 auto;  margin-top:50px;}

<div class="outter">  <div class="inner">      </div></div>

Why does margin-top not work to get the yellow box down?

This happens due to margin collapsing - so a border, padding to the parent element or inline content (any inline element) will switch off margin collapsing.

See demo below:

.largebox {  width: 800px;  height: 350px;  background-color: #00f;  margin-left: 10px;  border: 1px solid; /*ADDED THIS*/
}.box1 {  width: 250px;  height: 300px;  background-color: #ff0;  margin-left: 50px;  margin-top: 25px;}

<div class="largebox">  <div class="box1"></div>
</div>

Why does my margin-top move the entire section down?

What you are observing is called collapsing margins and is a rather confusing, hard-to-understand CSS feature that has given web developers headaches for decades.

See this simple example:

.parent {
  background-color: #ddd;
  height: 400px;
  width: 400px;
}

.child { 
  background-color: #666;
  height: 200px;
  margin-top: 100px;
  width: 200px;
}

<div class="parent">
  <div class="child"></div>
</div>

Why Does This CSS Margin-Top Style Not Work