0

我对一些 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 中删除评论时，顶部和底部边距会显着增加。

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

任何帮助将不胜感激。

4

2 回答 2

3

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

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

到CSS

于 2013-03-07T05:40:30.777 回答
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语法。您需要使用/* 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/

于 2013-03-07T05:42:47.773 回答