0

I am trying out on creating "My site" page by following an online course. I am a super beginner, any explanation in simplest words and terms would be much appreciated so i can understand w/out too technical. I tried to explained the issue in here in to my best ability, again, without trying to be too technical.

Whilst here, i am encountering an issue where I can see a white gap between two elements called 'top-container' & 'middle-container'. See pic1.

the white gap between two elements called 'top-container' & 'middle-container'

It seems i cannot get to the root of the issue and looking into both of the box models in developer tool, i can see that there are no margins set for both 'top' & 'middle' containers. see picH2_before & picH2_after.

top container middle container

After a few tweaks, the only way I can get rid of that white gap is by going to the element within the middle container and set the 'Margin' to 0px from a 'default value' of 19.920px. see picMiddleCOntainer & picTopCOntainer

element have default value margin

overwrite the default value to zero

Although this is sorted, sort of speak. Can anyone enlighten me on two things i would like to know better...

1.) Why is there a gap in between two (top & middle) containers? I cannot see gap in between middle and bottom containers further down in the HTML codes when there is no element taking place. It seems all point out to the element.

2.) Following up to the point above, why would the block element in this browser would have a top & bottom margin of 19.920px by default.

3.) Even with the margin in the element in question (), why would my middle container background colour stops on the element? and not continuing to join the top container. i.e,. The margins for all sides for top and bottom container is not set, hence, 0px.

I am using Chrome browser version 83.0.4103.116 (Official Build) (64-bit) on Windows 10.

much appreciate any feedback and help you can give me :)

Regards,

html codes:

<body>
    <div class="top-container" id="container-margins">
      <h1 class="signature">Budong Drummond</h1>
      <p>Senior software testing engineer.</p>
      <img class="left-cloud" src="images/cloud.png" alt="cloud-img" />
      <!-- <img class="mountain-img" src="images/mountain.png" alt="mountain-img" /> -->
      <img class="profile-pic" src="images/profilePix.png" alt="budong-drummond-profile-img" />
      <img class="right-cloud" src="images/cloud.png" alt="cloud-img" />
    </div>

    <div class="middle-container">
      <div class="profile">
        <h2>Hi,</h2>
        <p>I, also currently undertaking <span class="training-span">self-learning study</span> in order to become a software and web developer</p>
      </div>
      <hr />
      <div class="skills">
        <h2>My Skills.</h2>
        <div class="skill-row">
          <img class="" src="" alt="" />
          <h3>Lorem & Ipsum</h3>
          <p>
            Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus
            ante, ut lorem eros.
          </p>
        </div>
        <div class="skill-row">
          <img class="" src="" alt="" />
          <h3>Lorem Ipsum Dolor</h3>
          <p>
            Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu,
            rutrum nam.
          </p>
        </div>
      </div>
      <hr />
      <div class="contact-me">
        <h2>Get In Touch</h2>
        <h3>Lorem ipsum dolor sit amet, non elit.</h3>
        <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
        <a class="btn" href="mailto:name@email.com">CONTACT ME</a>
      </div>
    </div>
    <div class="bottom-container">
      <h2>TESTING</h2>
      <a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
      <a class="footer-link" href="https://twitter.com/">Twitter</a>
      <a class="footer-link" href="https://www.appbrewery.co/">Website</a>
      <p>© 2018 Name Surname.</p>
    </div>
  </body>

CSS template:

body {
  margin: 0px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.top-container {
  background-color: #d9bf77;
  position: relative;
  padding-top: 100px;
  padding-bottom: 50px;
}
.left-cloud {
  position: absolute;
  left: 20%;
  bottom: 200px;
}
/* .mountain-img {
  margin-bottom: 25px;
  height: 200px;
} */
.right-cloud {
  position: absolute;
  right: 20%;
  top: 25px;
}
.profile-pic {
  margin: auto auto;
  height: 200px;
}

h1 {
  margin-top: 0px;
  /*margin: 0 auto 0 auto; Auto centred the elements*/
  font-family: "Merriweather", serif;
}
h2 {
  font-family: "Libre Baskerville", serif;
  /* margin: 0px; */
}
.signature {
  font-family: "Sacramento", cursive;
}
p {
  font-family: "Montserrat", sans-serif;
}
.training-span {
  font-style: italic;
  text-decoration: underline;
}

.middle-container {
  background-color: #e7f0c3;
}

.bottom-container {
  background-color: #a4d4ae;
}
bdrummond
  • 63
  • 6
  • delete the padding-bottom: 50px; from the .top-container – Christophe Chenel Jul 07 '20 at 11:28
  • the key: margin-collapsing .. for the why h2 has margin. you cannot really find an answer but consider the fact that many elements has default values applied by your browser so that there is a minimum styling applied even if you add 0 CSS – Temani Afif Jul 07 '20 at 11:33
  • OK thanks for the heads-up. The only way i know i can do right now is to add/overwrite margin to the h2 css as zero pixel. tha seems to work fine. – bdrummond Jul 07 '20 at 11:48

0 Answers0