Q&A
リストについて質問です。
下記において、h5タグの「あ」とliタグの一番上の「う」の間のmarginを０にし、両者の距離を密着させたいです。（あとうの間の不自然な空間を消したいです。）
しかし、cssで
css
1.sample { 2 margin: 0; 3}
しても余白が無くなりません。
どうしたらいいですか？
仕様上無理なんでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>サンプル</title> 6<link rel="stylesheet" href="sample.css"> 7</head> 8<body> 9 10 11 <div> 12 <h5 class="sample"><a href="">あ</a></h5> 13 <ul> 14 <li><a href="">う</a></li> 15 <li><a href="">じゅ</a></li> 16 <li><a href="">き</a></li> 17 <li><a href="">こ</a></li> 18 <li><a href="">け</a></li> 19 <li><a href="">さ</a></li> 20 </ul> 21 </div> 22 23 24</body> 25</html>
回答3件
ベストアンサー
0
ブラウザデフォのline-heightが付いているだけ。
なので、
CSS
1.sample { 2 line-height:1em;/*or 100%*/ 3}
で上下の隙間はなくなります。
投稿2020/02/04 18:38
総合スコア1084
0
なぜh5を使用しているかはわかりませんが、文字を太くしたいだけなら以下のように書けばとりあえずは空白はない状態にできます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>サンプル</title> 6<link rel="stylesheet" href="sample.css"> 7</head> 8<body> 9 10 <div> 11 <ul> 12 <li class="sample"><a href="">あ</a></li> 13 <li><a href="">う</a></li> 14 <li><a href="">じゅ</a></li> 15 <li><a href="">き</a></li> 16 <li><a href="">こ</a></li> 17 <li><a href="">け</a></li> 18 <li><a href="">さ</a></li> 19 </ul> 20 </div> 21 22</body> 23</html>
css
1.sample { 2 font-weight: bold; 3 list-style: none; 4}
実際の表示は以下を参考
投稿2020/02/04 17:11
総合スコア876
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。