Css Margin Terror; Margin Adds Space Outside Parent Element

CSS margin terror; Margin adds space outside parent element

Add overflow:auto to your #page div.

jsFiddle example

And check out collapsing margins while you're at it.

Margin not implemented from parent element

It's due to margin collapsing. Margin collapsing simply means that if any element comes after another or inside another being first or the last element inside then the margin (top or bottom) touching with other element or parent will just collapse inside the other one's or parent's margin and simply the bigger margin will win. In this case, the child has a bottom margin collapsed with margin of parent and it all results in a case that the child doesn't have a margin but parent, but as soon as you apply border, the margin of child gets prohibited from collapsing with parent since the border comes in-between.

margin-top between child and its parent

As masterpreenz said in the comment, use overflow:auto to solve this. You can read more here about it: https://www.w3.org/TR/CSS2/box.html#collapsing-margins

body {  margin: 0;}
.content {  min-height: 100vh;  background: peru;  overflow: auto;}
.main-section {  background: red;  height: calc(100vh - 30px);  margin-top: 30px;}

<div class="content">  <div class="main-section">    <p class="parragraph"> parragraph </p>    <p class="parragraph"> parragraph </p>  </div></div>

Put Margin in Div

This is due to the margin overlap problem of static positioned elements. This could be fixed by adding position: relative; to the parent element and position: absolute to the child element.

#divFather {
    height:100px;
    width:800px;
    text-align:center;
    background-color:blue;
    position: relative;
}
#divChild {
    height:50px;
    width:400px;
    margin: 15px 0px;
    background-color:red;
    position: absolute;
}

<html>
    <head>
        <title>Page</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>
    <body>
         <div id="divFather">
             <div id="divChild">Margin</div>
         </div>
    </body>
</html>

Scroll in the body and the space after the block

You're running into wildly inherited margins problem derived from the popular collapsed margins - issue (which is better known for when two elements with vertical margins, the two colliding margins collapse into one) - not your exact case but same in nature.

Read more on w3.org Collapsing Margins

Since you used html, body {height: 100%} and the tall .example element has margin-top 100% - the body element moved, collapsed 100px down! It basically "wildly" inherited (at least visually) those 100px margin.

An element with vertical margin can cause unwanted results with ancestors flow. One common way to fix this is to smartly avoid vertical margin, or to add overflow: auto to the ancestor that's being affected by that problem html, body in your specific case.

html, body {
  height: 100%;    /* Why would you want this? */
  overflow: auto;  /* FIX for wild margins */
}

The other solution (I'm sure there are many others) is to not use html, body {height: 100%}
Rather min-height (if really needed) on html and body and vh (viewport height) unit on the .example element

html, body {
  /* min-height: 100%;  /* use min-height, but not needed */
}
.example {
  /* .... other styles */
  margin: 100px auto 0;
  height: calc(100vh - 100px); /* 100vh minus 100px margin-top */
}

Long story short - Be careful when using margin. I personally use it only when working with flexbox, or in the horizontal space (often when using inline-block elements) otherwise I always use wrappers with padding to create desired spacings which are perfectly controlled thanks to box-sizing: border-box (no need to calculate anything) - or when really necessary- I treat them with special care.

Body element has no margin but children's margin affects body's margin

That's the effect of margin collapsing. According to that MDN page:

Parent and first/last child
If there is no border, padding, inline part, 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.

There are many ways to go about trying to work around it. But understanding this concept is one step to doing it.

In your case, the margin of the first element in your body (which is h1) affects the margin of the body. If you wish to not have a margin on the first h1, you could add this (see it on this jsfiddle):

h1:first-child {
  margin-top: 0;
}

This assume your first element in the body is an h1.

I am not able to cut excess white spaces between two divs

That white space is the default margin of the header (<h2></h2>). you can reset it by using: h2 { margin: 0; } in your css file.

Paddings are the inside spacing of an element. However the white-space is not added in the inside of an element but outside. The outside spacing is called margin. As such, padding: 0; wont help you here.

h2 {
  margin: 0;
}

#about_restaurant {
  background-color: yellow;
  width: 100%;
  height: 240px;
  padding-top: 0;
  display: flex;
  align-items: center;
}

.delivery_image {
  flex: 0 0 auto;
  padding: 1em;
}

.delivery_image img {
  display: block;
  border-radius: 50%;
}

.describe_restaurant {
  float: left;
}

.describe_restaurant h2 {
  flex: 1 1 auto;
  padding: 1em;
}

.title {
  text-align: center;
  background-color: aqua;
  padding-bottom: 0;
}

<div class="container-fluid">
  <div id="About">
    <h2 class="title">About Restaurant</h2>
    <div id="about_restaurant">
      <div class="delivery_image">
        <img src="delivery.jpg" width="250" height="250">
      </div>
      <div class="describe_restaurant">
        <h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
        </h2>
      </div>


    </div>
  </div>
</div>

Css Margin Terror; Margin Adds Space Outside Parent Element