CSS Margin Strange Behavior, Why

CSS margin strange behavior, why?

That behavior is called collapsing margins. The margin values are not added but the higher value is used:

Vertical margins may collapse between certain boxes:

Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. […]

[…]

Strange behavior of css margins

You are setting absolute position to .bckr-image, add top: 0px; if you don't want margin.

.header is empty pushing .row down, is this intended?

* {    box-sizing: border-box;}.row::after {    content: "";    clear: both;    display: block;}[class*="col-"] {    float: left;    padding: 15px;}html {    font-family: "Lucida Sans", sans-serif;}.bckr-image{  margin: 0 auto 0 auto; background-image:url(http://www.w3schools.com/html/pic_mountain.jpg);  /*linear-gradient(white, #ADD8E6); background-repeat: no-repeat, no-repeat;*/  background-repeat: no-repeat; background-size: cover; background-position: top, bottom; z-index:-1; filter: blur(5px); position: absolute;    top: 0px; height: 100%; width: 100%;}
.container{ 
 background-image: url(http://www.w3schools.com/html/pic_mountain.jpg); background-size: cover; background-repeat: no-repeat; width: 80%; z-index:0; margin: auto;}

.header { margin: 120px auto 0 auto;    height: 350px;    color: #ffffff;    padding: 100px;    }.menu ul {    list-style-type: none;    margin: 0;    padding: 0;}.menu li {    padding: 8px;    margin-bottom: 7px;    background-color: #33b5e5;    color: #ffffff;    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}.menu li:hover {    background-color: #0099cc;}.aside {    background-color: #33b5e5;    padding: 15px;    color: #ffffff;    text-align: center;    font-size: 14px;    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}.footer {    background-color: #0099cc;    color: #ffffff;    text-align: center;    font-size: 12px;    padding: 15px;}/* For mobile phones: */[class*="col-"] {    width: 100%;}@media only screen and (min-width: 600px) {     /* For tablets: */    .col-m-1 {width: 8.33%;}    .col-m-2 {width: 16.66%;}    .col-m-3 {width: 25%;}    .col-m-4 {width: 33.33%;}    .col-m-5 {width: 41.66%;}    .col-m-6 {width: 50%;}    .col-m-7 {width: 58.33%;}    .col-m-8 {width: 66.66%;}    .col-m-9 {width: 75%;}    .col-m-10 {width: 83.33%;}    .col-m-11 {width: 91.66%;}    .col-m-12 {width: 100%;}}@media only screen and (min-width: 768px) {    /* For desktop: */    .col-1 {width: 8.33%;}    .col-2 {width: 16.66%;}    .col-3 {width: 25%;}    .col-4 {width: 33.33%;}    .col-5 {width: 41.66%;}    .col-6 {width: 50%;}    .col-7 {width: 58.33%;}    .col-8 {width: 66.66%;}    .col-9 {width: 75%;}    .col-10 {width: 83.33%;}    .col-11 {width: 91.66%;}    .col-12 {width: 100%;}}

<body><div class="bckr-image"></div><div class="container">  <div class="header"></div>    <div class="row">
      <div class="col-3 col-m-3 menu">        <ul>          <li>My:)</li>          <li>Zdjęcia</li>          <li>Prezenty</li>          <li>Mapa</li>        <li>Kontakt</li>        </ul>      </div>
      <div class="col-6 col-m-9">        <h1>The City</h1>        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>      </div>
      <div class="col-3 col-m-12">        <div class="aside">          <h2>What?</h2>          <p>Chania is a city on the island of Crete.</p>          <h2>Where?</h2>          <p>Crete is a Greek island in the Mediterranean Sea.</p>          <h2>How?</h2>          <p>You can reach Chania airport from all over Europe.</p>        </div>      </div>
  </div>
    <div class="footer">      <p>Resize the browser window to see how the content respond to the resizing.</p>    </div>  </div></body>

CSS Margins strange behavior

Try using padding instead of margin

http://jsfiddle.net/qa011xhu/1/

I thing the thing with the margin is that it's overlapping on itself. Like it would be if there would be two containers one above another and the first one would have margin-bottom: 10px; and 2nd one margin-top: 10px;. There would be space 10px between them, not 20px.

And, found this article:

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Empty blocks
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

Strange CSS margin problem

One thing to take note of in your example code is that you are over-using DIVs. The same code could be written like this:

<div class="formRow">
    <label class="fieldName">Email</label>
    <input class="fieldInput" .../>
</div>

Or, even better:

<style type="text/css">
    UL, UL LI
    {
        margin: 0px;
        padding: 0px;
     }

    UL LI
    {
        list-style: none;
    }

.fieldName{
        font-size: 12px;
        margin-left: 10px;
        margin-right: 10px;
        width: 100px;

}

.fieldInput{
        width: 200px;
}
</style>

<ul>
    <li><label class="fieldName">Email</label>
        <input class="fieldInput" .../></li>
     ...
</ul>

By using DIV tags for both sections you are violating the semantic meaning of the tag, which is "this section of the page is distinct from this other section." What you really are trying to do is just style your Form label differently from your Input and we already have tags to describe those.

Strange behavior on computed height and childrens margin

I think you're getting surprised by margin collapsing.

The two cases that margins collapse are between adjacent sibling elements and between parent and child elements.

In your case, it's the parent/child collapse that's causing you grief: If you have nothing interesting between the top margin of your parent and the (top margin of its first child|bottom margin of its last child), the parent margin collapses. The transparent border hack is commonly-used in these cases.

You probably noted that it didn't change the actual layout values--the p tag's margin kept the visible elements from collapsing into each other. But I admit it's counterintuitive.

Weird CSS margin behavior - browser not displaying small margins properly

Ok, here's a few things:

Why are you using <li> elements? are you able to just use <div>s?
There's a few approaches for this. But just using CSS floats may not work for you. Even though your math is perfectly correct, as I stated above, the browser can not do a fraction of a pixel. If you were to float these perfectly and you still got the margins to work, every once in a while, your far right image would push down as if it were floating around the other two.

You could float the third element to the right and not have a margin after the second one. If you do your math right, you can get this to look proper, but you may still have unequal margins if you do this. (here's the fiddle for this: http://jsfiddle.net/WZXa4/)

Why this behavior when I add margin and width to a button on css?

Because the total "width" is being 100% + 20px (10px each side).

One way to fix it is using calc() for width:

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: calc(100% - 20px); /* 100% subtracting horizontal margin */
}

CSS Margin Strange Behavior, Why