backgroundに色付け

Question

backgroundに色をつける時にpaddingには色をつけたくないのですが何か方法は有りますか？

Answer 1

  background-clip: content-box;

CSS の background-clip プロパティは、要素の背景の <color> または <image> を境界の下まで拡張するかどうかを設定します。

background-clip - CSS: カスケーディングスタイルシート | MDN

Answer 2

<p style="background-clip: border-box;">Lorem ipsum</p>
<p style="background-clip: padding-box;">Lorem ipsum</p>
<p style="background-clip: content-box;">Lorem ipsum</p>

p {
  background-color: #fcc;
  min-height: 100px;
  border: 10px dashed #f00
}

• CodePen

Answer 3

backgroundに色をつける時にpaddingには色をつけたくないのですが何か方法は有りますか？

backgroundに色をつける時にpaddingにも色はつくので、文字通りに解釈すると「方法はない」のですが、
(訂正、Lhankor_Mhyさんや、thyda.eiqauさんがおっしゃる通りbackground-clip: padding-box;だと実現できますね..、このプロパティを使ったことがなかったので頭から抜け落ちていました..)

別の方法で見た目として意図したような形にすることはできます。

例えば以下です。

---

[1] divを分割する

<div style="padding: 20px;">
  <div style="background: #f00; ">
    
  </div>
</div>

---

[2] paddingではなくborderを用い、背景色と同じ色をborderに指定

<div style="border: 20px solid 背景色; background: #f00;">
</div>

Answer 4

内包要素（divとか）を作ってそれに背景色をつければよいです。