div 边框在 div 的顶部和底部扩展填充答案

【问题标题】：div border extends padding on top and bottom of divdiv 边框在 div 的顶部和底部扩展填充
【发布时间】：2013-02-22 05:07:10
【问题描述】：

我遇到了一些 CSS 收缩包装的问题。首先是（非常简单的）代码...

<!doctype html>
<html lang="en-US">
    <head>
        <title>Device Activation</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                background: white;
                font-family: "Arial Black", Gadget, sans-serif;
            }
            div {
                background: #dddddd;
                //border: 1px solid;
                border-radius: 40px;
                box-shadow: 10px 10px 5px #888888;
                //display: inline-block;
                padding: 0px 10px;
                //text-align: justify;
                //-moz-border-radius: 40px;
            }
        </style>
    </head>
    <body>
            <h1>Boogy-woogy</h1>
        <div id="start" class="toggleable">
            <p>Test</p>
        </div>
    <script type="text/javascript">
        function makeVisible() {
            // Not here yet, but that's okay...right?   
        }
    </script>
    </body>
</html>

问题：当您从 border: 1px solid; 中删除 cmets 时，div 顶部和底部边距会显着增加。

我已经进行了一些研究，我知道这个问题与折叠边距有关，但我尝试了几次修复，似乎没有任何影响我的最终结果。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript css html margin

【解决方案1】：

我认为您的意思是因为 p 具有默认边距和填充。添加

p {
    margin:0px;
    padding:0px;
}

到css

【讨论】：

感谢您的帖子。你是绝对正确的。我选择另一个答案只是因为作者对我的其他一些错误进行了更详细的说明，但我也可以尊重中肯的答案。 +1 给你好先生或女士。 :)

【解决方案2】：

也许您的代码示例只是一个错字。如果没有，请注意，使用 JavaScript cmets，您可以选择：

// This is a javascript comment
/* This is a javascript comment as well... */

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Code_comments

如果您想进行 CSS 注释，您不能使用 // this is a comment 语法。您需要使用/* this is a comment */ 语法。

http://www.w3.org/TR/CSS21/syndata.html#comments

现在，当我隐藏 border: 1px solid 行时，我看不到顶部或底部边距发生变化。但我认为您在问题代码中使用的不正确语法会发生什么，div 诉诸display: block，因为inline-block 规则没有被应用。因为 inline-block 没有被应用，所以 div 被拉伸到了全宽。

http://jsfiddle.net/2f59k/

  body {
      background: white;
      font-family:"Arial Black", Gadget, sans-serif;
  }
  div {
      background: #dddddd;
     /* border: 1px solid;*/
      border-radius: 40px;
      box-shadow: 10px 10px 5px #888888;
      display: inline-block; 
      padding: 0px 10px;
      text-align: justify;
      -moz-border-radius: 40px;
  }

再次，如果从这个答案中没有收集到任何其他信息，
这不是 CSS 注释：

// border: 1px solid;

这是一个 CSS 注释：

/* border: 1px solid; */

更新

此问题与边框半径、边框等无关。如果仅将其理解为文本上方和下方但在灰色背景内的空间量，则您的问题是边距围绕文本。这种增加是显着的，但不如 div 在block 和inline-block 之间移动时宽度的变化那么显着。

将内部段落的margin 设置为margin: 0 可以解决此问题。

http://jsfiddle.net/74eTg/

【讨论】：

非常感谢您抽出宝贵时间帮助我解决这个问题。您的回答内容丰富、详细，最重要的是，您指出了我令人尴尬的 CSS 语法用户错误，却没有让我觉得自己太傻了。 >.