Question

我遇到一些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;删除评论时，div的上边距和下边距会显着增加。

我做了一些研究，我知道这个问题与崩溃边缘有关，但我已经尝试了几个修复，似乎没有任何影响我的最终结果。

非常感谢任何帮助。

Answer 1

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

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

到css

Answer 2

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

// 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 snyntax。您需要使用/* 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/

div border在div的顶部和底部延伸填充

2 个答案: