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

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

Q&A

解決したいこと

親要素で指定している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;
}

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

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

Are you sure you want to delete the question?