web-dev-qa-db-ja.com

インラインとしてスタイル設定された<p>で行の高さを制御する方法

うまくいけば、これはかなり簡単で、うまくいかないだけです。

段落を「インライン」としてスタイル設定する必要がありますが、段落の行間隔を非常に狭くする必要もあります... cssを使用すると、「line-height」をスタイル設定することで行の高さを大きくできるようです。デフォルトより小さくすることはできません...一方、「インライン」スタイルを削除すると、正常に機能します。何か案は?

ここに例があります:

<div style="width:200px;">
<p style="display:inline; line-height:0px;" >eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg erg eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg </p>
<p style="line-height:0px;" >eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg erg eqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg eqrgqerg ergeqrgewr gergerg wergerg ergqerg ergqerg ergqerg </p></div>

どうもありがとう

10
w1l

インライン要素では、line-height CSSプロパティは、ラインボックスの高さの計算に使用される高さを指定します。ブロックレベルの要素では、line-heightは要素内のラインボックスの最小の高さを指定します。

https://developer.mozilla.org/en/CSS/line-height

あなたができること:

  • セットする line-height: 0px;ラッピングについて<div>要素
  • セットする display: inline-block;内側に<p>
  • 内側を浮かせる<p>
13
sled