Margin on Child Element Moves Parent Element

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>

Css margin-top moves parent element

Explanation

Yes, it is a correct behaviour because the percents consider parents position. Like in your example, it will be positioned 45% below of body position.

But in your example, this wont work because 45% is not the center of any screen, see your example with some borders to see the behaviour:

body {  border:1px solid red;}
.custom{
  margin-left: 45%;  margin-top: 45%;    border:1px solid blue;  }

<div class="custom">      ...custom stuff here...   </div>

Why does the child div's margin affect the margin of the parent?

Margin collapse. See references below for some examples on avoiding it.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
http://reference.sitepoint.com/css/collapsingmargins

See fiddle - overflow hidden applied to .pannel
http://jsfiddle.net/pTTQQ/

.pannel {
  width: 100%;
  padding-bottom: 10%;
  overflow: hidden;
}

.pContent {
  width: 90%;
  height: auto;
  margin: 0 auto 0 auto;
  margin-top: 3%; /* Why can't this be margin top? */
}

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>

Child elements are going out of parent element

There are too many CSS frameworks like bootstrap, tailwind etc that can solve your problem and reduce lines of code. But if you want to create your own CSS then you can do this with flexbox and CSS grid system.

In your code adding display: inline-block; width: 100%; to your header class will fix your issue. Also use float only to main ul not li. I've made a little tweak to your code as below.

body{
    background-color:#191C26;
    color:white;
}
 
.header{
    margin-top:20px;
  border: 2px solid;
  display: inline-block;
  width: 100%;
}
.header-image{
    width:10%;
    display: inline-block;
    position:relative;
    top:36px;
}
 
.header-image img{
    width:100%;
}
 
.left-menu, .right-menu{
 
    list-style: none;
    font-size: 200%;
}
 
.left-menu a, .right-menu a{
    text-decoration: none;
    display: inline-block;
    color:white;
}
 
.left-menu{
    float:left;
    margin:0px;
    margin-left:12%;
}
 
.left-menu li{
    float:left;
  
}
 
.left-menu a{
  margin-right:20px;
}
.right-menu{
    float:right;
    margin:0;
}
 
.right-menu li{
    float:left;
    margin-left:10px;
}
 
.right-menu a{
    margin-left:20px;
}

<div class="container">
        <div class="header">
                    <div class="header-image"><img src="images/logo.png" alt="logo"></div>
                    <nav>
                        <ul class="left-menu">
                            <li> <a href="#">Services</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
 
                        <ul class="right-menu">
                            <li><a href="#">+91 964941****</a></li>
                            <li><a href="#">Get a Quote</a></li>
                        </ul>
                    </nav>
        </div>
 
        <div class="content-a">
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
        </div>
        <div class="content-a">
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
        </div>
    </div>

padding on child element moves parent element - CSS

You can just use calc() to calculate the proper height for .divHolder. Because of your margin, the .divHolder exceeds the parent container because you set it to height: 100%;. Reduce the 100% by your top and bottom margin and it should fit:

height: calc(100% - 40px);

#cover {  position: absolute;  width: 500px;  height: 500px;  background: rgba(44, 69, 128, 0.65);  z-index: 10;}.divHolder {  background: #fff;  color: #2c4580;  position: relative;  box-shadow: 2px 2px 2px #333;  padding: 10px;  margin: 20px 20px;  overflow: auto;  height: calc(100% - 40px);  box-sizing: border-box;}.divHolder div:hover {  border: 10px solid #000;}.divHolder div {  width: 100px;  height: 100px;  background: black;  padding: 10px;  display: inline-block;  cursor: pointer;  border: 10px solid white;}

<div id="cover">  <div class="divHolder">    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>    <div>image</div>  </div></div>

why div margin not calculated towards direct parent

In CSS, margin creates space around an element. When you add margin: 30px auto to the .page-inside container your adding 30px of top and bottom "space" around the .page-inside containers content. This is what's causing the 30px of white space in between .page and the nav bar. The reason this happens is because .page-inside is the first child of the parent container .page which doesn't have any content in the normal flow before the .page-inside div. Therefore, giving margin: 30px auto to .page-inside is essentially the same as giving it to .page as they are "at the same starting point" in the document.

On the other hand, padding creates space within an element. If you want to push the main content within .page-inside down 30px just use padding like padding: 30px 0. This would create 30px of top and bottom "space" within the .page-inside element and 0px of left and right space.

body {
  margin: 0;
}

.page {
    height: 1000px;
    padding: 0;
    background-color:rgb(31, 31, 31);
}

.page-inside {
    width: 1000px;
    padding: 30px 0;
    max-width: 95ch;
    margin: 0 auto;
    /*margin: 30px auto;*/
}

.row-apps {
    padding: 10px;
    overflow: hidden;
}

.row-apps-item {
    color: rgb(57, 57, 207);
    width: 16.66%;
    float: left;
    padding: 5px 10px;
}

nav {
  background: hsl(0, 0%, 20%);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 90ch;
  padding: .5rem 1rem;
  color: #fff;
  margin: 0 auto;
}

nav ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}

nav ul li {
  padding: 0 .75rem;
}

<nav>
  <div class="row">
    <div>
      <span>Aplikasi</span>
    </div>
    <div>
      <ul>
        <li>ID</li>
        <li>EN</li>
        <li>Sulaiman</li>
      </ul>
    </div>
  </div>
</nav>
<div class="header">
    </div>
    <div class="page">
        <div class="page-inside">
            <div class="row-apps">
                <div class="row-apps-item">
                    <img src="02.jpg" class="row-apps-img">
                    Kurikulum
                </div>
                <div class="row-apps-item">
                    <img src="03.jpg" class="row-apps-img">
                    Status Mahasiswa

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

Margin on Child Element Moves Parent Element