html space which belongs to no html tag

Issue

I have this html code

<img src="/static/media/call-of-duty-mobile-promo-banner.c6a9b17af598e76351f1.jpg" id="banner" alt='' />
<div id="DIV_1">
    <div id="DIV_2">
        <div id="DIV_3">
            login
        </div>
    </div>
    <div id="DIV_4">
        <img src='cart.jpg'></img>
    </div>
</div>

but there is a white space between first img and div with id DIV_1white space which belongs to no html tag(picture and red div)

btw I have tried to put margin and padding of those 2(img and red div) to 0 but still didnt work.

and when I inspect with browser that white space(looks like a white line) doesnt belong to neither img or red div

so how to remove gap?

this is the css

#banner {
    box-sizing: border-box;
    column-gap: 0px;
    row-gap: 0px;
    width:100vw;
    font: 16px "Times New Roman";
    margin: 0;
    padding: 0;
}
#DIV_1 {margin: 0;
    padding: 0;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    width: 1486.93px;
    background: red;
    font: 16px "Times New Roman";
  }/*#DIV_1*/
  #DIV_2 {
    align-content: center;
    align-items: center;
    block-size: 50px;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    inline-size: 490.683px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 245.333px 25px;
    transform-origin: 245.342px 25px;
    width: 490.683px;
    font: 16px "Times New Roman";
  }/*#DIV_2*/
  
  
  #DIV_3 {
    block-size: 30px;
    border-block-end-color: rgb(50, 67, 79);
    border-block-end-style: solid;
    border-block-end-width: 2px;
    border-block-start-color: rgb(50, 67, 79);
    border-block-start-style: solid;
    border-block-start-width: 2px;
    border-end-end-radius: 30px;
    border-end-start-radius: 30px;
    border-inline-end-color: rgb(50, 67, 79);
    border-inline-end-style: solid;
    border-inline-end-width: 2px;
    border-inline-start-color: rgb(50, 67, 79);
    border-inline-start-style: solid;
    border-inline-start-width: 2px;
    border-start-end-radius: 30px;
    border-start-start-radius: 30px;
    box-sizing: border-box;
    caret-color: rgb(33, 37, 41);
    color: rgb(33, 37, 41);
    column-rule-color: rgb(33, 37, 41);
    cursor: pointer;
    direction: rtl;
    height: 30px;
    inline-size: 94px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    overflow-wrap: break-word;
    perspective-origin: 47px 15px;
    text-align: center;
    text-decoration: none solid rgb(33, 37, 41);
    text-emphasis-color: rgb(33, 37, 41);
    text-size-adjust: 100%;
    transform-origin: 47px 15px;
    width: 94px;
    background: rgb(78, 254, 177) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 2px solid rgb(50, 67, 79);
    border-radius: 30px;
    font: 700 13px / 26px IRANSans, "Open Sans";
    list-style: outside none none;
    outline: rgb(33, 37, 41) none 0px;
  }/*#DIV_3*/
  
  #DIV_4 {
    align-content: center;
    block-size: 50px;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    inline-size: 996.233px;
    justify-content: flex-end;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 498.117px 25px;
    transform-origin: 498.117px 25px;
    width: 996.233px;
    font: 16px "Times New Roman";
  }/*#DIV_4*/

Solution

Add display block to the image. Images are display inline by default.

#banner {
    box-sizing: border-box;
    column-gap: 0px;
    row-gap: 0px;
    width:100vw;
    font: 16px "Times New Roman";
    margin: 0;
    padding: 0;
    display: block; /* <-- Here */
}
#DIV_1 {margin: 0;
    padding: 0;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    width: 1486.93px;
    background: red;
    font: 16px "Times New Roman";
  }/*#DIV_1*/
  #DIV_2 {
    align-content: center;
    align-items: center;
    block-size: 50px;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    inline-size: 490.683px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 245.333px 25px;
    transform-origin: 245.342px 25px;
    width: 490.683px;
    font: 16px "Times New Roman";
  }/*#DIV_2*/
  
  
  #DIV_3 {
    block-size: 30px;
    border-block-end-color: rgb(50, 67, 79);
    border-block-end-style: solid;
    border-block-end-width: 2px;
    border-block-start-color: rgb(50, 67, 79);
    border-block-start-style: solid;
    border-block-start-width: 2px;
    border-end-end-radius: 30px;
    border-end-start-radius: 30px;
    border-inline-end-color: rgb(50, 67, 79);
    border-inline-end-style: solid;
    border-inline-end-width: 2px;
    border-inline-start-color: rgb(50, 67, 79);
    border-inline-start-style: solid;
    border-inline-start-width: 2px;
    border-start-end-radius: 30px;
    border-start-start-radius: 30px;
    box-sizing: border-box;
    caret-color: rgb(33, 37, 41);
    color: rgb(33, 37, 41);
    column-rule-color: rgb(33, 37, 41);
    cursor: pointer;
    direction: rtl;
    height: 30px;
    inline-size: 94px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    overflow-wrap: break-word;
    perspective-origin: 47px 15px;
    text-align: center;
    text-decoration: none solid rgb(33, 37, 41);
    text-emphasis-color: rgb(33, 37, 41);
    text-size-adjust: 100%;
    transform-origin: 47px 15px;
    width: 94px;
    background: rgb(78, 254, 177) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 2px solid rgb(50, 67, 79);
    border-radius: 30px;
    font: 700 13px / 26px IRANSans, "Open Sans";
    list-style: outside none none;
    outline: rgb(33, 37, 41) none 0px;
  }/*#DIV_3*/
  
  #DIV_4 {
    align-content: center;
    block-size: 50px;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    inline-size: 996.233px;
    justify-content: flex-end;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 498.117px 25px;
    transform-origin: 498.117px 25px;
    width: 996.233px;
    font: 16px "Times New Roman";
  }/*#DIV_4*/
<img src="https://www.placecage.com/c/600/100" id="banner" alt='' />
<div id="DIV_1">
    <div id="DIV_2">
        <div id="DIV_3">
            login
        </div>
    </div>
    <div id="DIV_4">
        <img src='cart.jpg'/>
    </div>
</div>

Answered By – WizardCoder

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published