Solution 1 :

You have an obscure symbol just before the #test <div>. You need to remove it and the gap will disappear.

Copy and paste the code below (note: the symbol doesn’t show up in SO code format but you can see it if you copy the code into CodePen – https://codepen.io/fraggley/pen/VwvNJZe – look at the </div> tag just before the #test div):

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coe</title>
    <link rel="stylesheet" href="styles.css">
    <style>
    .footer-mgblock {
      border:1px solid red;
   margin:0px;
     padding:0px;  
    }


    .footer-mgblock  .mainSection {

        background: #000000;
        border:1px solid green;
        color: #FFFFFF;
        padding:0px; 
         margin: 0px;

    } 



</style>
</head>
<body>
<p> Hello </p> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:[email protected];700&display=swap" rel="stylesheet">


<div class="footer-mgblock">

    <div class="mainSection">
       child
    </div>

</div>
<div id="test" style="border:1px solid red;margin:0px;padding:0px">
   testdiv
</div>


</body>

Solution 2 :

Remove Extra closing div tag

 .footer-mgblock {
       border:1px solid red;
       margin:0px;
       padding:0px;  
    }

 .footer-mgblock  .mainSection {

      background: #000000;
      border:1px solid green;
      color: #FFFFFF;
      padding:0px; 
      margin: 0px;

    } 
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>

<body>
<p> Hello </p> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:[email protected];700&display=swap" rel="stylesheet">
<div class="footer-mgblock">
 <div class="mainSection">child</div>
<div id="test" style="border:1px solid red;margin:0px;padding:0px">
   testdiv
</div>


</body>
</html>

Problem :

Recieve empty line before div with id=”test”. Dont want the space before test div. Wrapper div with Parent & child exists adjacent to it. Tried lot of css but not able to remove space.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coe</title>
    <link rel="stylesheet" href="styles.css">
    <style>
    .footer-mgblock {
      border:1px solid red;
   margin:0px;
     padding:0px;  
    }


    .footer-mgblock  .mainSection {

        background: #000000;
        border:1px solid green;
        color: #FFFFFF;
        padding:0px; 
         margin: 0px;

    } 



</style>
</head>
<body>
<p> Hello </p> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:[email protected];700&display=swap" rel="stylesheet">


<div class="footer-mgblock">

    <div class="mainSection">
       child
    </div>

</div>‚Äč
<div id="test" style="border:1px solid red;margin:0px;padding:0px">
   testdiv
</div>


</body>

Comments

Comment posted by jsfiddle.net/Manju06/wed9c15q/21

Are you asking space between divs or the left space on each div?

Comment posted by Arav

Thanks a lot. Copied the code from outlook web mail. Tried a lot with css. Didn’t work Thanks again

Comment posted by Arav

Thanks for the info

By

Leave a Reply

Your email address will not be published. Required fields are marked *