Q&A
どこのどういう隙間ですか？
divが持っているとどのように確認されましたか？
具体的に追記(画面キャプチャなども有効活用して)ください。
また、コードはマークダウンのcode機能を利用してご提示ください
HTMLとCSSの勉強をしているのですが、自動的に発生する隙間を埋める方法がわかりません。
<div> <p>oooooo<p> <p>oooooo<p> </div> <div> <p>oooooo<p> <p>oooooo<p> </div>のように、divのブロックを二つ作ったとき、ブラウザではこのブロック間に隙間が出来てしまいます。
margin:0px;
とか
padding:0px;
にしても変化ありませんでした。どうすればよいでしょうか？
※追記
下の画像は、上記のコード＋背景色の付与でブラウザに表示されるものです。
緑ブロックと赤ブロックの間にある隙間に関して質問させていただいてます。
p にマージンがあるとか、そういうことはありませんか？
スクリーンショットを見る感じ、やはりp にマージンがありそうですね。親子マージン相殺が起きてそうです。
ご指摘ありがとうございます。ほかにCSSを付与していないので、divがもっているのではと考えました。
なるほど。
では、Kapustinさんのご回答のとおりでいいのではないかと思いますよ。
たぶん、それで解決します。
デベロッパーツールで確認すればどこが持ってるかわかりますよ。
または、
div{ border:1px solid; }
としてみてもいいかもですね。
これなら親子マージン相殺も理解しやすいですし。
まあ、ご自分の「divがもっているのでは」という考えが正しいと思われるなら、私のアドバイスは無視してもかまいません。あなたが解決する問題ですからね。
div間の隙間なので、てっきりdivに何か問題があるものと思ったのですが、pに「margin :0px;」としたところ解決しました。勉強不足で知らないことが多いので助かります。親子マージン相殺など、ネットで調べてみようと思います。本当にありがとうございました。
ああ、お試しいただいたのですね、こちらこそありがとうございます。
ご解決されて何よりですが、Kapustinさんのご回答のとおり、リセットCSSは使った方が楽ですので、ご検討ください。
そうなんですか。いろいろとありがとうございます。リセットCSS使ってみようと思います。
回答1件
0
ベストアンサー
まず、ブラウザごとに決められたデフォルトのCSS設定をリセットするのが良いかと思います。
設定をリセットするためのcssや標準化するためのcssがいくつかありますので、reset.css や normalize.css などで検索してみてください。
normalize.cssを設定してみよう
2019年版！おすすめのリセットCSSまとめ
投稿2019/09/27 07:30
総合スコア1186
回答ありがとうございます。試してみます。
なお、chromeのデベロッパーツール等を使うと要素に影響しているcss設定などを素早く調査することができます。慣れておくと便利ですので、ぜひ使ってみてください。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
Edgeの方で多少使ってますけど、chromeならこういった解説サイトもあるんですね。アドバイスありがとうございます。使ってみようと思います。
あなたの回答
tips
プレビュー
