backgroundの上下1ピクセルを透明にする一番簡単な方法

いつもお世話になっています。
backgroundの上下1ピクセルを透明にする一番簡単な方法を教えてください。

例えば次のような、分量を表示するコードで各分量の上下1ピクセルは親要素と同じ背景色になるようにするにはどうすれば良いですか。
<div>砂糖:<span>30g</span> 醤油:<span>10cc</span></div>
<style>div { background: #0ff } span { background: #ff0 }</style>

No.2 ベストアンサー 回答者： fujillin 回答日時： 2023/08/02 18:27

No1です。

＞ですのでdivの高さを変えずにspanの上下1ピクセルを透明にする簡単な方法を～
ブラウザの通常のサイズ計算では、表示要素ができるだけ表示できるように自動調整しますので、「高さを変えずに」ということは、これを起こさないように設定する必要がありますが、その内容はご質問文からは読み取れません。
本来なら、div内で折り返しが発生すれば（＝例えば、ユーザがウィンドウ幅を縮めるなどした場合）、自動的にdivの高さが広げられますけれど、その辺の制御はどうしているのでしょうか？
line-heightを固定値で設定してあるって意味なのかなぁ？

spanの高さをline-heightより2px小さくしたいのなら、
　display:inline-block;
　line-height: calc(1.5em - 2px);
が簡単だとは思いますけれど・・・
（1.5emはデフォルトのline-heightなので、ご指定の状況に合わせて修正してください）

あるいは、上記同様にinline-boxで、spanの高さをline-heightに指定しておいて、box-sizing: border-box;として、上下に透明のborderを設けるという方法でも実現できると思います。


他には、beforeなどで要素より高さの小さな要素を作成して、背景色代わりに利用するなどというのも考えられそうではありますが、実際にはどのような状態が設定されていて、どのような制限条件があるのかもなんだかよくわからない状態なので・・
無難そうなのはlinear-gradientを利用して背景色を設定しておく方法でしょうかね。
linear-gradientは、本来グラデーション用のCSSですけれど、単色指定にすれば単色表示になります。
記述は若干長くはなりますけれど、
background: linear-gradient(to bottom, transparent 1px, #ff0 1px calc(100% - 1px), transparent calc(100% - 1px) );
とか。

この回答へのお礼

質問文が不十分ですみませんでした。
なるべく短い質問文にしているのは、回答者が帰らないようにする対策でもあります。
何卒ご容赦ください。
より詳しく書くと、表示はjavascriptモジュールが担当していて、私はこのモジュールが提供する関数に文字列を渡しているだけなのでした。
ですから親要素がdivであるかも実は分かっていません。
試しにウィンドウ幅を縮めてみたのですが、スクロールバーが出るだけで、既に描画されたドキュメントは改行されないような制御が働いているようです。
display: inline-block
line-height: calc(1.5em - 2px)
でうまくいきました。
1.5emはデフォルトのline-heightなのですね。
しかし、これだと将来デフォルトのline-heightが変更されたときに泣きを見そうですが、「簡単は正義」という私の方針に従い、採用させていただきます。

linear-gradientを使えば、将来デフォルトのline-heightが変更されても正常に動いてくれそうですので興味があります。
しかし、これも最初の質問では端折らせていただきましたが、実はspanで横方向のlinear-gradientを設定しています。
これは同じく単色指定で状況によって横方向に伸び縮みする棒グラフのような描画になるようにしています。
この横方向のlinear-gradientを維持したまま、追加で縦方向のlinear-gradientを設定する書き方が分からず、この方法はいったん中断しました。

しかし、この有益な情報は私の質問履歴からいつでも参照できますので、ひとまずline-heightを設定する方法で対処しようと思います。

お礼日時：2023/08/03 07:45

No.3 回答者： fujillin 回答日時： 2023/08/03 12:28

No2です。

＞なるべく短い質問文にしているのは、回答者が帰らないようにする対策でもあります。
全く違う条件で無駄に考えさせられれば、アホらしいので回答者は離れます。
後出しジャンケンは不愉快だし、自分が困るわけでも無いので、「勝手に好きにしてれば？」となります。

この回答へのお礼

気を悪くさせてすみません。
なるべく短い質問文にしているのは、回答者が帰らないようにする目的も少しありますが、
単純に書き忘れただけだったり、その時は、この質問文で十分な回答が得られると思っていたという理由が大きく、このたび先生に無駄に考えさせてしまったのは意図的ではありません。
何卒ご容赦ください。

お礼日時：2023/08/03 13:20

No.1 回答者： fujillin 回答日時： 2023/08/02 12:54

こんにちは

考え方によっていろいろあると思いますが・・

div { padding:1px 0; }

とかではいかが？

この回答へのお礼

ありがとうございます。
divにpaddingを設定すれば、spanの上下1ピクセルの背景色を簡単に透明にできますね。

しかし、最初の質問に書き忘れて恐縮ですが、今回は訳あってdivの高さを変えたくありません。

ですのでdivの高さを変えずにspanの上下1ピクセルを透明にする簡単な方法を改めてご教示いただきたく存じます。

お礼日時：2023/08/02 14:31