时间戳

首页 > 解决方案 > 包装器 div 旁边的 div 之前的额外空间

html - 包装器 div 旁边的 div 之前的额外空间

问题描述

在 id="test" 的 div 之前接收空行。不想要测试 div 之前的空间。带有 Parent & child 的 Wrapper div 与其相邻。尝试了很多 css 但无法删除空间。 

<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:wght@300;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>

标签： htmlcss

解决方案

在 #test 之前有一个不起眼的符号<div>。您需要将其删除，间隙将消失。

复制并粘贴下面的代码（注意：该符号不会以 SO 代码格式显示，但如果将代码复制到 CodePen 中，您可以看到它 - https://codepen.io/fraggley/pen/VwvNJZe - 查看</div>#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:wght@300;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>

推荐阅读