Question 43315 in Html Question posted in
Some basic documentation can be found here.

How to remove space at the bottom of imgs CSS/HTML?

I am new to web development and have created two images stacked on top of each other in an html/css document, however, there is a space between them that I cannot get rid of (example in image below). I have included my code and was wondering if anyone had an easy solution to this problem?

enter image description here

:root {
  --color-offblack: #252422;
  --color-brown: #403D39;
  --color-lightbrown: #CCC5B9;
  --color-offwhite: #FFFCF2;
  --color-orange: #EB5E28;
  --width: 84%;
  --mobile-width: 92%;
}

* {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--color-offblack);
  background: var(--color-offwhite);
}

.container {
  width: var(--width);
  margin: 0 auto;
}

img {
  width: 100%;
  width: 300px;
}

a {
  color: var(--color-offblack);
  transition: all 300ms ease;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--color-offblack);
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
}

h1 {
  font-size: 6rem;
  letter-spacing: -0.4rem;
  line-height: 0;
}

h2 {
  font-size: 3.2rem;
  letter-spacing: -0.2rem;
}

h3 {
  font-size: 2rem;
}

h4,
h5 {
  font-size: 1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

h5 {
  font-size: 0.9rem;
}

p {
  line-height: 1.6;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 3rem;
  font-weight: 500;
  background: var(--color-offblack);
  color: var(--color-offwhite);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 300ms ease;
}

.btn:hover {
  background: var(--color-offwhite);
  color: var(--color-offblack);
  border: 1px solid var(--color-offblack);
}

.btn-primary {
  background: var(--color-orange);
  color: var(--color-offwhite);
}

section {
  max-width: 100vw;
  padding: 12rem 0 0;
}


/* NAVBAR */

nav {
  width: 100vw;
  height: 7rem;
  display: grid;
  place-items: center;
  position: fixed;
  z-index: 2;
  background-color: var(--color-offwhite);
}

nav button {
  display: none;
}

nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav .container ul {
  display: flex;
  gap: 3rem;
}

nav .container ul a {
  padding: 0 0 0.3rem;
}

nav .container ul a.active {
  border-bottom: 1px solid var(--color-orange);
}

nav .container ul a.highlight {
  color: var(--color-orange);
}

nav a:hover {
  color: var(--color-orange);
}

nav ul li {
  position: relative;
}

nav ul li ul {
  display: none !important;
  position: absolute;
  background-color: var(--color-offwhite);
  flex-direction: column;
  padding: 10px;
  padding-top: 80px;
  padding-bottom: 35px;
  padding-left: 10px;
  border-radius: 0px 0px 5px 5px;
}

nav ul li:hover ul {
  display: flex !important;
}

nav ul li ul li {
  width: 180px;
}

nav ul li ul li a {
  padding: 22px 14px;
}

nav ul li ul li a:hover {
  color: var(--color-orange);
}


/* END OF NAVBAR */


/* HEADER */

header {
  background: var(--color-lightbrown);
  height: 100vh;
  width: 100vw;
  position: relative;
  top: 5rem;
  display: grid;
  place-items: center top;
}

header.container {
  display: grid;
  grid-template-columns: 30rem auto 17rem;
}

.content-wrapper {
  position: relative;
}

.content-wrapper img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.content-wrapper h2 {
  position: relative;
  bottom: 0;
  left: 0;
  top: -350px;
  color: var(--color-offwhite);
  text-align: center left;
}

.content-wrapper a {
  position: relative;
  bottom: 0;
  left: 0;
  top: -260px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Samuel Horton Jr</title>

  <!--- GOOGLE FONTS-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
    rel="stylesheet">

  <!--- ICONSCOUT CDN-->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

  <!--- STYLESHEEET-->
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <nav>
    <div class="container">
      <a hrefs="index.html" class="logo"><img src="./images/logo.png"></a>

      <ul>
        <li><a href="index.html" class="active">home</a></li>
        <li><a href="myWork.html">my work</a>
          <ul>
            <li><a href="greaseSolutions.html">grease solutions LLC</a></li>
            <li><a href="minirig.html">minirig</a></li>
        </li>
        </ul>
        <li><a href="myself.html">myself</a></li>
        <li><a href="otherCreations.html">other creations</a></li>
        <li><a href="contact.html" class="highlight">hire me</a></li>
      </ul>


      <button id="menu-button"><i class="uil uil-bars"></i></i></i></button>
      <button id="close-button"><i class="uil uil-multiply"></i></i></i></button>
    </div>
  </nav>
  <!--END OF NAVBAR-->

  <header>
    <div class="container">
      <div class="content-wrapper">
        <img src="images/greaseSolutionsBackground.png">
        <h2>Grease Solutions LLC</h2>
        <div class="cta">
          <a href="greaseSolutions.html" class="btn btn-primary">clean up</a>
        </div>
      </div>

      <div class="content-wrapper">
        <img src="images/minirigBackground.png">
        <h2>Minirig</h2>
        <div class="cta">
          <a href="minirig.html" class="btn btn-primary">turn up</a>
        </div>
      </div>
    </div>
  </header>

</body>

</html>

Sorry for any post/formatting mistakes, I am new to all of this so please bear with me!

Tags:

2

Answers


  1. 0

    you need to update your content-wrapper class

    .content-wrapper {
    position: relative;
    height: 500px;
}

    jsbin

    Login or Signup to reply.
  2. 0

    Sam. I ‘ve read your question carefully.
    Your is 500px in height but your .content-wrapper is not 500px, so I inserted height:500px in your css file.

    .content-wrapper {
   height:500px;
   position: relative;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search