Q&A
なにも設定していないのに、余白があるときはpaddingが原因なのですね。。
ご回答いただきありがとうございます！
仕様なので消せないと思っておりますが、
消せる方法は存在しますか・・？
以下画像の通り、
「paddingやmarginなどの余白」のことではなく、
「青枠内にある、h1タグそのものがもつ余白」のことです。
矢印で示した部分になります↓
これは、一切CSSを使用していません。
「あいうえお」と入力しただけのものです。
使用しているのは、「code pen」というサイトです↓
html
1<h1>あいうえお</h1>
css
1なし
回答4件
0
ベストアンサー
その部分は、「行の高さ」と言ってline-heightプロパティで調整可能ですよ。
デフォルトは「normal」なので、何も指定していなければ、ブラウザ判断された値が適用されます。
投稿2020/05/05 08:50
総合スコア20
0
明示的にline-heightなど指定すれば消せるでしょうが、その領域はフォント側で適切だと考えて設定された高さなので、消すべきかどうかは慎重に判断してください。
ふつう、フォントの高さはそのフォントに含まれるすべての文字のうち最も上にある部分と最も下にある部分がおおむね収まるように設定されています。上は「Ǻ」あたりを入れてみると分かるかと。
(下は分かりやすい文字が無いです。「y」だとたぶん一番下までは行かず、合成用丸「 ̥」を適切な文字に付けたりすると行くのかなと)
訂正: height→line-height
投稿2020/05/05 09:02
編集2020/05/05 09:16
総合スコア3047
0
既にある回答を参考にされると良いです。line-heightですね。
1を指定すれば「文字列のサイズの高さ」そのままになります。
下記、質問見間違えたための誤答
h1タグそのものがもつ余白
それを制御するのがpaddingです。
要素の全四辺のパディング領域を設定します。
投稿2020/05/05 08:38
編集2020/05/05 09:14
総合スコア80875
大抵の要素はデフォルトで様々な設定を持っています。
ブラウザ間で設定値が違うこともあるのでそれらをなくすべく
reset.cssを用いて調整をはかります。
違います。
あぁそうか。オレンジのところかと思ってました。これは見間違いました。
「line-height」 ですね。heightではなく。
そうですね、うろ覚えでした。
誤答した私が言うのもあれですが、一応、試された方が。
そうですね…。回答の本題としては必ずしも消さない方が良いのではないかという部分だったので、消す方法については試していませんでした。
確かに、「結局どうしたいのか」が見えづらい内容ではありますね。
「仕様」部分のみにフォーカスをあてたほうが良いのか、どうか。
ご回答いただきありがとうございます！
試してみたのですが、原因は「line-height」でした！
いえ、私のはもともと誤答で、yamyam0003さんの回答を元に補足しただけのものです。
先にline-heightに言及されたyamyam0003さんの回答をベストアンサーにしてあげてください。
0
line-heightが原因でした！
投稿2020/05/05 11:32
総合スコア22
私が最終的にたどり着きたかったのは、
【「line-height:1;」以外で発生する「無駄な余白の抹消」】です！
やっと理解できました！↓
https://codepen.io/fuhixx/pen/MWaQadJ
https://codepen.io/fuhixx/pen/KKdQVjo
codepenでは、「width:1px height:1px」の記述がないとおかしくなりますが、
ローカル環境からchromeとfirefoxで確認したときはなくても反映されました。
これは原因がよくわかりませんでした。
→結局どちらもwidthかheightが1px以上ないと反映されませんでした。
参考サイト：https://oshiete.goo.ne.jp/qa/7988606.html
しかし、この計算を自動化できたら
もっと楽にできるのですが・・（＾＾；）
以下サイトの方法を試してもダメでした↓（個別で設定し直す必要があるため）
参考サイト：https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。