How to remove auto margin on a span tag?

Question

I try for many hours to reproduce this, but i have result .

I use a span tag to make some letters appears behind the picture, but that made some spaces appears between the letters. I tried to remove margin with a "margin:0" but it didn't work.

This is my code :

.container-banner {
    position: relative;
    margin-bottom: 50px; }

#web {
    writing-mode: vertical-rl;
    text-orientation: inherit;
    transform: rotate(180deg );
    color: #d24706;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    position: absolute;
    top: -26px;
    font-size: 206px;
    left: -107px;
    text-transform: uppercase; }

#design {
    position: absolute;
    right: -10px;
    font-size: 130px;
    top: 376px;
    color:#d24706;
    font-family: 'Roboto', sans-serif;
    font-weight: bold; }

.container-banner img {
    z-index: 1; } 

.back-picture {
    position: relative;
    z-index: -1;
    margin: 0px; }

<div class="container-banner">
   <img src="images/web.jpg" alt="web">
   <div id="design">D
       <span class="back-picture">E</span>
       S
       <span class="back-picture">I</span>
       G
       <span class="back-picture">N</span>

   </div>
   <div id="web">Web</div>
</div>

How can i remove this space between the letters ?

Indeed, that add some more clarifications, thanks ! – Iwolf441 Apr 30 '21 at 17:23 — Iwolf441, Apr 30 '21 at 17:23

score 1 · Accepted Answer · answered Apr 30 '21 at 17:01

Just remove whitespaces in div which will be generated automatically while you indented a code.

.container-banner {
    position: relative;
    margin-bottom: 50px; }

#web {
    writing-mode: vertical-rl;
    text-orientation: inherit;
    transform: rotate(180deg );
    color: #d24706;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    position: absolute;
    top: -26px;
    font-size: 206px;
    left: -107px;
    text-transform: uppercase; }

#design {
    position: absolute;
    right: -10px;
    font-size: 130px;
    top: 376px;
    color:#d24706;
    font-family: 'Roboto', sans-serif;
    font-weight: bold; }

.container-banner img {
    z-index: 1; } 

.back-picture {
    position: relative;
    z-index: -1;
    margin: 0px; }

<div class="container-banner">
   <img src="images/web.jpg" alt="web">
   <div id="design">D<span class="back-picture">E</span>S<span class="back-picture">I</span>G<span class="back-picture">N</span>
   </div>
   <div id="web">Web</div>
</div>

How to remove auto margin on a span tag?

1 Answers1