由于边距坍塌,div的背景颜色适合内容而不是边框​​?

时间:2014-04-13 07:27:14

标签: html block background-color css

我在表格中有一个div,我想坚持表格。我想知道为什么当div有显示块时,背景不会填满div的边框(带背景颜色),而是适合内容。 margin 0,padding 0。 我找到了两个困扰我的解决方案,我不明白:如果我在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>

1 个答案:

答案 0 :(得分:1)

你的样式表有重置吗?

* {
    margin: 0;
    padding: 0;
  }

即使您的div有margin:0padding:0,它也不适用于p内的h2div,所以你有空位。