Q&A
> line-heightを使用して余白を狭めることは出来たのですが、画面サイズによって余白の幅が変動するので、解決できませんでした。
使用したスタイルシートを質問文に追加してください。何に対してline-heightを使用したのかわかりません。
以下のような形で、<span>要素を改行した際に、上のテキストとテキストの間に余白ができます。
<div class="title" style="line-height:2vh;"> <span>テキスト</span><br><span>テキスト</span> </div>
上の<span>と下の<span>の間に発生する固定の余白を少し狭められればいいのですが、
どのような方法がありますでしょうか？
【試したこと】
line-heightを使用して余白を狭めることは出来たのですが、画面サイズによって余白の幅が変動するので、解決できませんでした。
よろしくお願いいたします。
質問文に載っているHTMLの内容には全角空白が含まれており、</br>は<br>の誤り(br要素には終了タグはない)です。
上記修正いたしました。ご確認よろしくお願い致します。
回答2件
0
<div>ブロック全体のfont-sizeとline-heightを0にした後(これで<br>の高さは0になりますが,<span>の高さも0になってしまいます),<span>のfont-sizeとline-heightの大きさを設定します.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .title{ 9 font-size: 0; 10 line-height: 0; 11 } 12 span{ 13 font-size: 16px; 14 line-height: 100%; 15 } 16 </style> 17</head> 18<body> 19 <div class="title"> 20 <span>テキスト</span><br><span>テキスト</span> 21 </div> 22</body> 23</html>
投稿2020/12/22 03:57
退会済みユーザー
総合スコア0
0
ベストアンサー
隙間をなくしたいのであれば、line-heightに要素のフォントサイズに対する倍率1(単位なし)を指定する。
HTML
1<div class="title" style="line-height:1;"> 2 <span>テキスト</span><br><span>テキスト</span> 3</div>
投稿2020/12/22 03:38
総合スコア11990
あなたの回答
tips
プレビュー
