5Px Extra Margin Getting Added to The Bottom of Each Div

5px extra margin getting added to the bottom of each div

You need to specify units on your CSS declarations.

http://jsfiddle.net/m7YCW/

div.main_nav
{ 
    display: inline-block;
    height: 25px;       /* set px */
    width: 900;
    padding: 0;
    margin: 0;
    vertical-align: bottom;    
}

Learn to make use of your developer tools in Chrome, if you had right mouse buttoned on the elements and chosen -> inspect it would bring up the dev tools. You can then view the 'metrics' and 'computed styles' areas to see that main_nav was rendering as 30px instead of 25px and also that there was a warning symbol next to the 25 css declaration and it was being explicitly dropped.

IMG has 5px extra padding at bottom of div

use the following css: working jsFiddle

img{display:block;}

Images are by default displayed inline - which causes the padding below the image. (because of line-height)

divs are adding extra margin that I didn't specify

This is caused by the default line-height, which is set by the browser. By setting it to 0, every div will stack onto each other without extra spaces. Since the divs are set to be inline-blocks, they will behave like inline elements such as <img>. Line height will apply to lines, which will affect all inline elements, which is the blocks in this case.

#board{
    line-height: 0px;
}

This will solve the problem.

Adding margin to div pushes it off the screen

Use CSS Flex

/*QuickReset*/ * { box-sizing: border-box; margin: 0; }

html {
  height: 100%;
}

body {
  background: black;
  height: 100%;
  position: relative;
  
  display: flex; /* Use flex! */
  padding: 5px; /* Instead of children margin */
  /* gap: 5px; /* Uncomment to add a gap between your child elements! */
}

.one,
.two {
  border: 3px solid green;
  border-radius: 5px;
}

.one { width: 10%; background: red;  }
.two { width: 90%; background: blue; }

<div class="one">
</div>
<div class="two">
</div>

Div containing canvas have got a strange bottom margin of 5px

You can prevent it from happening by adding display: block to the css for the canvas element.

i.e:

canvas {
    background-color: khaki; /* demo purposes */
    display: block;
}

Why does second div with the same margin top value as the first div with margin bottom has no effect?

In CSS, margins can collapse. Here's some light reading: https://www.joshwcomeau.com/css/rules-of-margin-collapse/

Adding a <br> between the two divs should prevent the margins from collapsing.

css overflow:hidden causing extra bottom margin

The issue is not with overflow: hidden but with display: inline-block of the label element:

label {
    display: **inline-block;**
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

change it to display: block and it will fix it.

label {
    display: **block;**
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

Another fix is to vertical align that particular label, .ellipsis, to bottom instead of overwriting default class of bootstrap:

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    vertical-align:bottom
}

Depends which solution fits you best.

Additional margin of 5px when inline-table or inline block is used

try http://jsfiddle.net/xarq5/10/

#hello{
    float: left;
}

and

#hello ul {
    float: left
}

explanation: whenever you have an html element that's containing other floating elements, the containing element doesn't fully "contain" the floating elements unless if it's floated itself..

note: unlike this answer you can keep your html indented as it was (ie don't worry about spacing or the lack thereof):

<body>   
    <div id="hello">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</body>

Why h2::after element comes right below main h2 element with margin-bottom?

It considers h2 and h2::after as a single element. So adding margin-bottom to h2 won't make any difference. Instead, you can add margin-top to the after element to get some spacing between it.

h2 {
  content: "main h2";
  font-size: 180%;
  margin-bottom: 40px;
  word-spacing: 2px;
  text-align: center;
  color: #000;
}
                
h2::after {
  display: block;
  background-color: #4cd137;
  height: 5px;
  width: 250px;
  content: " ";
  margin: 0 auto;
  margin-top:40px;
}

<h2>Main h2 heading</h2>

Margin on child element moves parent element

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same.
Hence, you can also use the following to prevent a top-margin collapse:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 update: if you're willing to drop IE11 support you can also use the new CSS construct display: flow-root. See MDN Web Docs for the whole details on block formatting contexts.

Update by popular request:
The whole point of collapsing margins is handling textual content. For example:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

5Px Extra Margin Getting Added to The Bottom of Each Div