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

Question

我在表单下有一个 div，我想坚持使用该表单。我想知道为什么当 div 有显示 block 时背景不会填满 div 的边框(具有背景颜色)但适合内容。边距 0，填充 0。我发现了 2 个困扰我的解决方案，我不明白: 如果我向 div 添加可见边框，背景会一直填充到表单。如果我将 div 的显示属性更改为内联 block ，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;
  }

即使你有一个 margin:0和 padding:0对于您的 div，它不适用于 p或 h2在div里面, 所以你有空格。