web-dev-qa-db-ja.com

CSSグリッドへのパディング

私はHTMLとCSSの初心者なので、FlexやCSSグリッドなどのさまざまなシステムを実験してきました。グリッド列内の要素にパディングを追加できないという問題に遭遇しました。これを修正する方法はありますか？物理ヘッダー自体にパディングを追加しようとすると、表示グリッドであるため機能しません。コードは次のとおりです。

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
}


header:not(menu, h1, nav){
    display: block;
    padding:500px;

}
htmlcssgrid-layoutcss-grid
4
Jordy337

投稿に基づいて達成したいことを理解することは困難ですが、CSSルールが要素を適切にターゲティングしていないため、パディングが行われていないようです。以下に示すように、パディングをヘッダールールに移動すると、パディングが適用されます。

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
    padding:500px;
}


header:not(menu, h1, nav){
    display: block;
    /*padding:500px;*/

}
<header>
test
</header>
1
Adam Chubbuck

必要に応じて、グリッドパディングまたは行ギャップを使用してグリッドコンテナー間にパディングを追加できます。

グリッドパディング

行ギャップ

それ以外の場合は、問題を解決するために、より詳細な質問が必要です。

1
Tanckom