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>

問題：divからコメントを削除するborder: 1px solid;と、上下の余白が大幅に増加します。

私はいくつかの調査を行い、この問題がマージンの崩壊に関連していることを理解していますが、いくつかの修正を試みましたが、最終結果に影響を与えるものは何もないようです。

どんな助けでも大歓迎です。

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 コメントを作成する場合は、syntax を使用できません// this is a comment。/* this is a comment */構文を使用する必要があります。

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

今、border: 1px solid線を非表示にすると、上マージンまたは下マージンが変更されません。しかし、質問のコードで使用した不適切な構文で何が起こっていたのか、ルールが適用されていなかったためdivに頼っていたと思います。が適用されていなかったため、div は幅いっぱいに伸びました。display: blockinline-blockinline-block

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; */

アップデート

この問題は、境界線の半径、境界線などとは関係ありません。問題は、テキストの上下のスペースの量としてのみ理解され、灰色の背景の内側にある場合、テキストを囲む余白です。blockこの増加は重要ですが、div が と の間にあるときの幅の変化ほど重要ではありませんinline-block。

margin内側の段落の を に設定するとmargin: 0、問題が解決します。

http://jsfiddle.net/74eTg/

于 2013-03-07T05:42:47.773 に答える