0

簡単に説明するために、コードに直接ジャンプします。次のように、別の html ファイルから画像ギャラリー (キャプション テキスト付き) を自動的に読み込んで挿入する単純なアコーディオン メニューがあります。

<section>
    <a class="box-link" href="#.html">Link 1</a>
        <div class="image-gallery">
            <img src="1.jpg"> [...]
            <p>Example loaded paragraph of text</p>
        </div>
    <a class="box-link" href="#.html">Link 2</a>
    <a class="box-link" href="#.html">Link 3</a>
    <a class="box-link" href="#.html">Link 4</a>
</section>

そして、この関連する CSS:

section {
    width: 100%;
    max-width: 60em;
    margin: 0 auto;
}

.box-link {
    display: block;
    box-sizing: border-box;
    padding: 1em;
    width: 100%;
}

大きなブラウザー ウィンドウでは、セクションの幅は最大 60em で、画面の中央に配置されます。コンテンツのすべてのビットが列の端にフラッシュされ、きれいに整列されます。

ブラウザー ウィンドウを 60em よりも小さくすると、すべてが 100% 幅になり、pタグを除いて、まさに私が望むものになります。この状態では、pタグがページの端にぶつからないように、左右に 1em のマージンまたはパディングを追加したいと考えています。

セクション タグに追加すると、 ppadding: 0 1em;タグに必要なことが正確に達成されますが、他のすべてのものにもパディングが適用されますが、これは望ましくありません。大きなブラウザー ウィンドウでは、幅は依然として 60em に制限されています。ウィンドウ サイズが 60em 未満に縮小されると、パディングが表示されます。

したがって、問題は次のとおりです。この「自動」方法でpタグのみ に追加のパディング/マージンを達成する方法はありますか?p { padding: 0 1em; }

ありがとうございました。

4

1 に答える 1