由于边距折叠，div的背景颜色适合内容而不是边框​​？

Question

我想在表单下放置一个 div。我想知道为什么当 div 有显示块时，背景不会填满 div 的边框（带有背景颜色）但适合内容。边距 0，填充 0。 我找到了 2 个困扰我但我不明白的解决方案：如果我向 div 添加可见边框，则背景会一直填充到表单中。如果我将 div 的显示属性更改为内联阻止 div 背景填充到顶部。我要问的是为什么会发生这种情况，也许是解决它的更好方法。我是 CSS 初学者，谢谢。

    _______________________
    |      form            |
    |______________________|
     ----------------------- border of div sticking to form as wanted

  unwanted white space between border and content due to color not showing

    _______________________
    |     div content      |       
    |                      |
    |______________________|

     div{
         background-color: #3B3B3B;
         width:652px;
         margin:0;
         padding:0;
         display:block;
        }
    .formStyle {
               width: 652px;
               height: 64px;
               background: linear-gradient(-15deg, transparent 0%, #3b3b3b 80%), linear-gradient(15deg, transparent 0%, #3b3b3b 80%), linear-gradient(to bottom, #3b3b3b 70%, #000000 90%);
               margin:0;
               }

根据要求的 HTML：

            <form action="" class="formStyle">
                <img class="computerImage">
                <label>members login:</label>
                <input name="Your name" type="text" id="yourname" value="Your name">
                <input name="emailid" type="text" id="emailid" value="Email Id">
                <input name="" type="submit" class="button" value="GO">
            </form>
            <div>
                <h2>about total management?</h2>

                <p>Total Management is a free, tableless, W3C-compliant web design layout by Template World. This template has been
                    tested and proven compatible with all major browser environments and operating systems. You are free to modify
                    the design to suit your tastes in any way you like.</p>

                <p>We only ask you to not remove <span>"Design by Template World"</span> and the link http://www.templateworld.com
                    from the footer of the template.</p>

                <p class="lasttext">If you are interested in seeing more of our free web template designs feel free to visit our
                    website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
            </div>
            </body>

Answer 1

你的样式表有重置吗？

* {
    margin: 0;
    padding: 0;
  }

即使您的 div 有 margin:0 和 padding:0，它也不适用于 div 内的 p 或 h2，因此您有空格。