Question

我试图找出为什么这个小提琴手中的方框在文字的上方和下方有如此多的填充。

CODE

 <style>
    .simplebox {
        padding: 6px;
        background: #eee;
        border-radius: 8px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
    }
     .simplebox-content {
        box-shadow: 0 1px 1px #ddd inset;
        border: 1px solid #cccccc;
        border-radius: 5px;
        background: #fff;
        padding: 0 8px;
    }
    </style>


    <div class="simplebox" data-editurl="/TextualReporting/ShowProgressEditor?itemId=5d205a60-64de-4717-ac1d-9db00189db74" style="">
    <div class="simplebox-content">
    <p>This is a test. This text has too much padding above and below.</p>
    </div>
    </div>

有什么见解？

Answer 1

段落<p>默认有保证金： - ）

Answer 2

您的问题是默认的填充和边距！您可以使用此基本通用重置来删除所有html元素的所有默认填充和边距：

* { padding: 0; margin 0;}

将它添加到css样式表的最顶部，这样除非你指定它，否则什么都不会有填充。所以你的<p></p>（或其他任何人）不会有那个讨厌的默认保证金。

使用某种形式的重置是前端最佳实践。对更高级的重置感兴趣？查看normalize.css。

小提琴中的例子：http://jsfiddle.net/agconti/SLjV2/2/

Answer 3

这是由于<p>标签有一些余量作为标准。要删除它，只需添加

p {
    margin: 0px;
}

到您的CSS ...或者使用另一个标签。

嵌套div中的CSS填充

3 个答案: