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>
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>
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>
Thanks a lot. Copied the code from outlook web mail. Tried a lot with css. Didn’t work Thanks again
