Space between img and div

Question

I'm currently designing the about me section of my portfolio site (mobile version). The section is surrounded by two svg shapes. For some reason, between the content and the upper shape, there is a space that I can't figure out why is there.

Can anyone help me figure out why?

:root {
  --color-main:#8049F5;
  --color-secondary:#6E00FF;
  --color-white:#fff;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  background-color: var(--color-main);
}

body {
  line-height: 1.6;
  font-family: "Poppins", sans-serif;
}

img {
  width: 100%;
  height: auto;
}

p {
  font-size: 1.3rem;
}

.secondary-header {
  text-transform: uppercase;
  font-size: 1.9rem;
  opacity: 0.8;
  letter-spacing: 3px;
}

.introduction__content {
  background-color: var(--color-secondary);
  padding: 0 2rem;
}
.introduction__header {
  color: var(--color-white);
  text-align: center;
  margin-bottom: 2rem;
}
.introduction__paragraph {
  text-align: center;
  color: var(--color-white);
  opacity: 0.9;
}
.introduction__paragraph:not(:last-child) {
  margin-bottom: 2rem;
}

    <main>
        <section class="introduction">
            <img src="https://svgur.com/i/ZTL.svg" class="introduction__up-shape" alt="">
            <div class="introduction__content">
                <h2 class="introduction__header secondary-header">About me</h2>
                <p class="introduction__paragraph">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, placeat deserunt. Quae dolorum deserunt assumenda expedita. Excepturi eveniet iusto a.
                </p>
                <p class="introduction__paragraph">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, corrupti veniam cupiditate blanditiis ipsam enim fuga odio? Ut vel necessitatibus voluptas. Accusantium non velit nam.
                </p>
                <p class="introduction__paragraph">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quasi beatae rerum id reiciendis eaque, ut doloremque, iusto amet non necessitatibus debitis commodi pariatur voluptates delectus libero deleniti consectetur!
                </p>
            </div>
            <img src="https://svgur.com/i/ZQw.svg" alt="">
        </section>
    </main>

This might be due to the default styles of the h2 applied by the user agent. h2 has default vertical margins. — ckoala, Jul 22 '21 at 08:03

score 1 · Accepted Answer · answered Jul 22 '21 at 08:00

Simply make your .introduction__up-shape element a block element by applying display: block:

:root {
  --color-main:#8049F5;
  --color-secondary:#6E00FF;
  --color-white:#fff;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  background-color: var(--color-main);
}

body {
  line-height: 1.6;
  font-family: "Poppins", sans-serif;
}

img {
  width: 100%;
  height: auto;
}

p {
  font-size: 1.3rem;
}

.secondary-header {
  text-transform: uppercase;
  font-size: 1.9rem;
  opacity: 0.8;
  letter-spacing: 3px;
}

.introduction__content {
  background-color: var(--color-secondary);
  padding: 0 2rem;
}
.introduction__header {
  color: var(--color-white);
  text-align: center;
  margin-bottom: 2rem;
}
.introduction__up-shape {
  display: block;
}
.introduction__paragraph {
  text-align: center;
  color: var(--color-white);
  opacity: 0.9;
}
.introduction__paragraph:not(:last-child) {
  margin-bottom: 2rem;
}

<main>
        <section class="introduction">
            <img src="https://svgur.com/i/ZTL.svg" class="introduction__up-shape" alt="">
            <div class="introduction__content">
                <h2 class="introduction__header secondary-header">About me</h2>
                <p class="introduction__paragraph">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, placeat deserunt. Quae dolorum deserunt assumenda expedita. Excepturi eveniet iusto a.
                </p>
                <p class="introduction__paragraph">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, corrupti veniam cupiditate blanditiis ipsam enim fuga odio? Ut vel necessitatibus voluptas. Accusantium non velit nam.
                </p>
                <p class="introduction__paragraph">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sed quasi beatae rerum id reiciendis eaque, ut doloremque, iusto amet non necessitatibus debitis commodi pariatur voluptates delectus libero deleniti consectetur!
                </p>
            </div>
            <img src="https://svgur.com/i/ZQw.svg" alt="">
        </section>
    </main>

Depending on the screen size and pixel density, you might still see a very thin line between the elements. You can remedy that by adding an additional `margin-bottom: -1px` — Constantin Groß, Jul 22 '21 at 08:03
:) This will give some insight: https://dev.to/christiankaindl/the-strange-img-gap-in-html — Constantin Groß, Jul 22 '21 at 08:14
Thank you. Also, would inlining the svg offer some pros over using img tags? — Boris Grunwald, Jul 22 '21 at 08:17
That's a good question, that I don't have an answer for with regards to the spacing issue. But keep in mind that with inlining, the image won't be gzipped and cached and will add to the page document size for each page using it. — Constantin Groß, Jul 22 '21 at 08:53

Space between img and div

1 Answers1