why div margin not calculated towards direct parent

Question

I am working on exercising basic CSS. I want the webpage's header layout looks like this: wide top margin.

My html:

    <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>

And the CSS:

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

.page-inside {
    width: 1000px;
    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;
}

I intend to make .page-inside have distance 30px towards the content main container .page (with black background preserved). So I add that margin, but I got 30px from .page-inside towards .header instead. It looks like this: broken top margin. I already ensured (by Chrome dev tools) the white space is due to .page-inside, not header or .page.

I know I can just add padding to either .page-inside or .row-items but I believe adding that margin should work too. What's wrong with my understanding?

Answer 1

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>