web-dev-qa-db-ja.com

スパンテキストのパディングはスパンサイズを増やします

私は次のスパンを持っています

<SPAN style="border:solid;TEXT-ALIGN: right; FONT-STYLE: normal;width:100px; padding-RIGHT: 50px; DISPLAY: inline-block;PADDING-TOP: 3px">hello world</SPAN>

スパンの全幅は、パディングサイズに基づいて増加しているように私には思えます。スパンサイズが大きくなるのを防ぎ、テキストを右に埋める方法はありますか？

htmlcsspadding
6
CliffC

あなたのパディング権が実際にそこのスペースで機能するかどうかはわかりませんが、そこにあるべきではありません。別の問題になる可能性もあります。あなたが持っている

padding- right:50px

の代わりに

padding-right:50px;

編集：スパン自体を増やすのではなく、スパンの外側のスペースを増やすには、次を置き換えます。

padding-right:50px;

と

margin-right:50px;

これが例です。よくわからない場合は、それをいじってください。 http://jsfiddle.net/robx/GaMpq/

9
robx

パディングの代わりにマージンを使用します。パディングは要素の内側に適用されるスペースであり、マージンは要素の外側に適用されるスペースです。

3
ryanmarc

マージンまたはパディングのいずれかを使用しても、ボックスモデルをいじって、スパンの実際のサイズを変更していることになります。これは、行の折り返しが適切な場所で発生せず、正当化されたマージンを混乱させる可能性があることを意味します。

アフターセレクターを使用して、コンテンツを少し追加し、スタイルを設定できます。

your_css_class:after { content:" "; Word-spacing:1em; }

インラインスタイリングとして実行できるとは思いません。<style>ブロックまたは外部ファイルで実行する必要があります。

0
thomasafine

それを行う最も簡単な方法：

span {
  width: 80%;//Or some different value
}
0
user3114190