CSS使用で表示がうまくできません

質問

http://hachiyagaki.web.fc2.com/

これを練習として作っています。

一番下の、販売店の名前のアンダーラインだけ、文字にくっついてしまいます。
上の方の「店頭販売のみです。」と同じ「h2」を使っています。
h2とは別にしたほうがいいですか？
何がおかしいかわからないので、文字とアンダーラインがくっつかない方法を教えてください。

回答No.1

mokunyan · ベストアンサー

こんにちは。

class="shop-table"
のline-height: 16pxをなしにするとラインがくっつかないみたいです。
こっちの方に入れてしまうと二つの連絡先をまとめている枠の全体の行に対して余白ができるようになるので、h2要素のラインの部分が下の余白から圧迫？されるようです。

連絡先の詳細の方に余白を入れたいなら、

class="shop-l"とclass="shop-r"のほうにそれぞれ
line-height: 16pxを加えるといいかもしれません。
私のPCとブラウザの環境ではこれで余白を入れることができました。

お礼

できました、できました！
うれしいです！ありがとうございます！