6

私は（の修正版）Gene Locklinの「深さ」を実装しましたが、これは問題なく機能します。コードは次のとおりです。

body:before {
    height: 10px;
    width: 110%;
    position: fixed;
    top: -10px;
    left: -10px;
    z-index: 6;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
    content: "";
}

しかし、:before & :after セレクターを使用してマージンまたはパディングを追加したいと思います。フォームを周囲のテキストから分離するために、ある種のギャップを知っています。

これは、これらのセレクターを使用して特定の段落の周りにスペースを空けようとした後に発生しましたが、成功しなかったため、ターゲット属性に基づいてこれらのスタイルを設定しました。

セレクターは主に自動テキストを容易にするように設計されており、マージンまたはパディング (以下のクエリの後に追加)、改行、スパン、空の分割、または JavaScript を使用して要素を作成することで、これを完全に簡単に行うことができることを認識しています。と 。しかし、私はこれを :before & :after でやりたいと思っています。

動作させたいサンプルコードは次のとおりです。

form:before {
    height: 20px;
    content: "";
}

form:after {
    height: 20px;
    content: "";
    }

これが機能しない可能性があると思います... :before/:after は通常インラインであるため、ブロックレベルとして表示する必要があります (ただし、「深さ」にはこれは必要ありませんか?) および/または :before/:絶対配置が必要な後。

寛大なご意見をお寄せいただきありがとうございます。

4

1 に答える 1

15

を指定してみてくださいdisplay: block;。である必要はありませんposition: absolute;。

form:after {
  content: ' ';
  display: block;
  height: 20px;
}

form:before {
  content: ' ';
  display: block;
  height: 20px;
}
于 2011-09-20T01:48:15.893 に答える