Q&A
因みになんですが、hrでなくてはならない理由ってあったりしますか？
前提・実現したいこと
hrを挿入して、その下にimgを入れた時に水平線の下と画像の上の間に空白ができてしまいます。
空白を無くして線と画像が重なるようにするにはどうしたらいいでしょうか。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="styles1.css"> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 7 </head> 8 <body> 9 10 <hr> 11 <img src="img/fe406606-ff51-4b7f-8095-16f2c720bb03.jpg"> 12 13 </body> 14 15</html> 16
css
1hr { 2 margin-bottom: 0; 3} 4
試したこと
hrに対してmargin-bottom: 0;
を試してみたのですが効かない様子です・・・。
bootstrapのリンクを付けると発生する様子です
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
実際のコード、試してみたコード それぞれご提示ください
回答3件
0
試しましたが空白は出来ません。
0mizuさんはどのようなコードを書いて空白ができましたか？
コード
HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>sample</title> 6<style> 7hr{ 8margin-bottom:0; 9} 10</style> 11</head> 12<body> 13<hr> 14<img src="001.png"> 15</body> 16</html>
表示結果
投稿2019/03/22 07:18
総合スコア29
色々原因を調べていたら
head間に、
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
を書いたところ空白ができると気づいたのですが、
これはbootstrapの影響を受けている？ということなのでしょうか
横からスミマセン。
質問者さんへ
隙間の出るHTML・CSSのコードを提示されないと、検証出来ませんので、各コードを提示してください。
すいません、記載いたしました。
0
ベストアンサー
HTMLに
<hr class="m-0"> で解決ができました。 bootstrapへの知識が至りませんでした。 追記、回答いただいた方々ありがとうございました投稿2019/03/24 03:58
退会済みユーザー
総合スコア0
これが解決方法ですか？
提示のCSSと、どこの部分のmarginが違ったのですか？
退会･･･自分で解決したからteratailは「用無し」になったのですかね。
･･･決断早いなぁ･･･
0
「tanu2express」さんの回答にもありますが、<hr>は、デフォルトで、立体的なスタイルが適用されています。（insetが多いかも）
なので、「border-bottom」の部分が色が薄くなっていて、空白に見えるだけではないのでしょうか？
確認用CSS
CSS
1hr { 2 margin-bottom: 0; 3 border-width: 50px; /* ← 任意・追加 */ 4}
「border-width」で任意に50px等、大きな数字を入れると分かり易いかと思います。
投稿2019/03/23 04:31
総合スコア3525
あなたの回答
tips
プレビュー
