Q&A
画像の余白が発生するHTMLコードとCSSコードを提示してください。
提示のリセットCSSとHTMLだけならいっさい余白はないです。
https://codepen.io/hatena19/pen/mdPrLRa
li や h1 などを使った時に必ず意味のわからない余白がつきます。
margin,padding の可能性も当たりましたが全くありません
下の画像はchromeの拡張機能使い無駄な余白を表したものです
あ、もちろんブラウザーに元からある
余白をつけたりする機能は下のコードは消しました
HTML
1<html> 2 <head> 3 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 4 </head> 5</html>
このコードはネットで紹介されていたもので
リセットCSSはごちゃごちゃして嫌なので、それと同じ働きをすると聞き使っています
あと、一応上の画像のHTMLです。
ちなみにCSSに余白を指定するプロパティーはありません
HTML
1<h1>〇〇</h1> 2<p>〇〇</p> 3<nav> 4 <ul> 5 <li><a href="#">〇〇</a></li> 6 <li><a href="#">〇〇</a></li> 7 <li><a href="#">〇〇</a></li> 8 <li><a href="#">〇〇</a></li> 9 </ul> 10</nav>
chromeの検証で見たんですが
liタグの中のaタグには余計な余白はないのです。
しかし、liタグを確認すると、中身を指定してないのにあるんです…
cssファイルの追記をお願いします。
> あ、もちろんブラウザーに元からある
> 余白をつけたりする機能は下のコードは消しました
これって、「下のコードで消しました」との誤記かと思ってましたが、
ひょっとして、言葉通り「下のコード（リセットCSSへのリンクタグ）は消しました」ということなのでしょうか。
、、、誤字です
ていうかありがとうございます
こんなに親身になってもらって
もっかい基礎からやり直します
現状では回答するには情報が不足しているので、情報を追加してください、ということです。
質問のHTMLコードならリセットCSSが効いているので、すべての余白はないはずです。
そもそもリセットCSSとそのHTMLだけなら、画像のように横並びになるはずないですよね。
そうなるCSSを提示してください。
せっかく載りかかった舟なので回答できるだけの情報を提供してよ、ということです。
自分のCSSの提示と、すでに提示された画像をペイント系アプリか何かで編集し、「あなたが余白だと考えている部分」を明確に矢印などで示してください。
回答1件
0
ベストアンサー
ブラウザの仕様によってデフォルトでmargin、paddingが付きます。
css内の上部の方で
stylesheet
1* { 2 margin: 0; 3 padding: 0; 4}
のように全称セレクタを使ってあらかじめデフォルトを解除しておくと余白が埋まるかと思います。
追記：
reset.cssで既にデフォルトのスタイル
は初期化されているとのことなので
ご認識されている空間が余白ではなく行間だと仮定すると
「line-height」プロパティで行間の調整をしてみてはいかがでしょうか？
投稿2020/08/20 02:01
編集2020/08/20 08:49
総合スコア22
> 何故かセレクタが「・」になっちゃってます
コードブロックを使うと解消されますよ。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
質問はリセットCSSを適用しているとのことなので、ブラウザデフォルトは解除されています。
keiさん
ありがとうございます！
次に解説する際にはコードブロック使ってみます！
hatenaさん
リセットCSSは既に利用されてるということなんですね、、
質問者様の余白部分がどの領域を指摘されているか汲み取れていないのですが
もしかすると余白のことではなくline-heightかも知れないですね。
> kajimaru315さん
回答も編集できるので、できればこの回答もコードブロックを使ってみませんか。
https://teratail.com/questions/285401#reply-405313の回答ではコードブロックを使っているようなので、同じようにすればできると思います。
あなたの回答
tips
プレビュー
