Div边框扩展Div的上下填充

div border extends padding on top and bottom of div

本文关键字：Div 填充 上下 扩展 边框      更新时间：2023-09-26

我有一些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的顶部和底部边距将显着增加。

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

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

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

到css

也许您的代码示例只是一个错别字。如果没有，那么请注意，对于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评论

现在，当我隐藏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/

相关文章：