@Kobayashi0620 (さなだむし)posted at 2024-11-16

親要素で指定したpaddingを一部子要素には反映させたくない場合の方法がわからず、詰まってしまいました

Q&A

Closed

HTML CSS 初心者フロントエンド padding

解決したいこと

親要素で指定しているpaddingを一部子要素では除外したいのですが、そちらの方法がわからず、詰まってしまいました。

該当ソースコード

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css">

<div class="a">
  <img src="https://picsum.photos/300/200?random=1" alt="" class="b">
  <div class="c">
  </div>
  <div class="d">
  </div>
</div>

style.css

.a{
  height: 3000px;
  padding: 0 25px;
  background-color: #000fff;
}

.b{
  width: 100%;
  margin:0 0 100px 0;
}

.c,.d{
  width: 100%;
  height: 200px;
  background-color: #fff;
  margin:0 0 100px 0;
}

自分で試したこと

1.margin

.追加

margin-left: -25px;
margin-right: -25px;

.修正

.b{
  width: 100%;
  margin:0 0-25px 100px -25px;
}

こちらは左のみのpaddingを無視して左寄りに画像が表示されるようになりました

2.:not()

.修正

.a:not(img){
  height: 3000px;
  padding: 0 25px;
  background-color: #000fff;
}

何も変化が起こらなかったです

最後まで読んでいただきありがとうございます。
もしご存知の方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いします。

3Answer

@lhankor_mhy posted at 2024-11-18

こちらは左のみのpaddingを無視して左寄りに画像が表示されるようになりました

width: 100%とは、この場合「親要素のコンテンツボックスと同じサイズにせよ」という意味です。コンテンツボックスはパディングを除いた領域ですから、width: 100%とmargin-left: -25px;とmargin-right: -25px;は矛盾するため同時に満たせません。この場合はmargin-right: -25px;が無視されます。
ですので、width: auto等にするといいかもしれません。

2Like

Comments

@lhankor_mhy
あ、置換コンテンツだからautoはダメですね。calcで計算した方が手っ取り早いのかもしれません。

@itagagaki posted at 2024-11-16

まず、どういうレイアウトにしたいのかを説明してください。
（たぶんCSSのボックスモデルを誤って理解されているような気がします）

1Like

Comments

@Kobayashi0620
Questioner
シングルページのスマホ特化サイトを作成しようとしています。
表示ページ全体をslick-slideでスライドをしページ切替を行うようにしたいと考えています。

今回修正したいのはメインビジュアルをスマホ特化箇所で親要素が指定しているpaddingを無視して、全体表示させたいと考えています。
レイアウトは下記キャプチャになります。

何卒回答のほどよろしくお願いします

@southkey47 posted at 2024-11-18

打ち消しのためにネガティブマージンをいれるくらいなら親要素のpaddingを取っ払って子要素にレイアウト用のdivを追加して制御したほうが応用が効いて便利になると思います

html

<div class="a">
  <img class="b" src="https://picsum.photos/300/200?random=1" alt="">
  <div class="c">
    <div class="inner bg-white">
      <p>text</p>
    </div>
  </div>
  <div class="d">
    <div class="inner bg-white">
      <p>text</p>
    </div>
  </div>
</div>

css

.a {
  background-color: #000fff;
  height: 3000px;
}

.b {
  width: 100%;
  margin-block-end: 100px;
}

.c,
.d {
  width: 100%;
  margin-block-end: 100px;
  padding-inline: 25px;
}

.bg-white {
  background-color: #fff;
}

.inner {
  height: 200px;
}

追加で入れ子にした.inner要素にbackground-colorを直接指定してもいいですが、デザインによっては特定の子要素のみ背景色を変えたいこともあるかもしれないのでclassを分けてもいいかもしれません

See the Pen Untitled by southkey47 (@southkey47) on CodePen.

1Like

Are you sure you want to delete the question?

親要素で指定したpaddingを一部子要素には反映させたくない場合の方法がわからず、詰まってしまいました

解決したいこと

該当ソースコード

自分で試したこと

1.margin

2.:not()

3Answer

Comments

Comments

Your answer might help someone💌