html スペース - 興味深い実験_html/css_WEB-ITnose

まず、デモのセットをお見せします

1 <input />2 <input type="submit" />

表示効果:

なぜスペースがあるのですか? inputはインライン要素ではないでしょうか？コードを変更して効果を確認してください

<input /><input type="submit" />

2 つの入力間にギャップがない場合、下のスペースは消えます

別のインライン要素のセットを試してください:

1 <span>行内元素</span>2 <span>行内元素</span>3 <span>行内元素</span>4 <span>行内元素</span>5 <span>行内元素</span>

表示効果は次のとおりです。

これらのインライン要素間の間隔を消すために、インライン要素の間にできた余分な隙間を手動で削除します。 コードは次のとおりです

1 <span>行内元素</span><span>行内元素</span><span>行内元素</span><span>行内元素</span><span>行内元素</span>

効果の図は次のとおりです:

使用方法この方法は確かにインライン要素間の隙間を取り除くことができますが、コードが 1 つの部分に積み上げられているため、見た目が不快になります。

1. font-size:0を使用します

原則: インライン要素の間隔は、改行、タブ(タブ)、スペースなどの文字によって引き起こされ、文字のサイズは定義によって制御されます。フォント サイズなので、スペースを削除するには、まずフォント サイズを変更します。 つまり、現在のインライン要素の親要素のフォント サイズを 0 に設定します。この方法は、一部のブラウザにおける inline 要素と inline-block 要素間の間隔という大きな問題を基本的に解決できます (IE7 やその他のブラウザでは、1 ピクセル間隔になる場合があります)。ただし、

Chrome

というブラウザがあり、

デフォルトでフォント サイズの最小制限があります

。互換性を考慮して、次の追加も必要なためです。一部の効果は次のコードによって実現されます

1 <div>2     <span>行内元素</span>3     <span>行内元素</span>4     <span>行内元素</span>5     <span>行内元素</span>6     <span>行内元素</span>7 </div>

しかし、効果の図は次のようになります。これは、デフォルトでは、ブラウザが HTML を解析するときに、

HTML ソース コード内の空白文字が表示されるためです。スペースとして扱われ、複数の連続する空白文字は 1 つとして扱われます。

HTML の「空白文字」には、スペース、タブ、改行 (CR/LF) が含まれます。

気にする必要はありません。スペースには代替記号を使用してください

1 div{2     font-size: 0px;3 }4 span{5     font-size: 14px;6 }

レンダリング:

名前番号の説明

 

 

終わりのない空白 ( 1

半角（1文字幅） 1文字（2文字幅） 「;」は省略できません。通常、   (つまり、スペース キーを押すことによって生成されるスペース) を使用します。 1.white-space しかし、次のような効果を実現したい場合はどうすればよいでしょうか?ある程度の凹みはありますか？マージンやパディングを使用しますか?そんな物件？

1 div{2     font-size: 0;3     -webkit-text-size-adjust:none;  /* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */4 　　*word-spacing:-1px;             /* 使用word-spacing 修复 IE6、7中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */5 }

ホワイトスペース属性が pre に設定されている場合、ブラウザはテキスト内のスペースと改行を保持するため、テキスト内でスペースと復帰を直接使用できます。 テキスト内の 文字間の間隔を設定します。その値は、単語間に指定された長さを設定します。

		2.letter-spacing

1 <p>行内        元素</p>2 <p>行内 元素</p>

3.word-spacing

テキスト内の

単語間の間隔を設定します。その値は単位付きの長さの値です

1 <p>行内   元素</p>2 <p>行内 元素</p>

4. text-indent

記事の各段落をインデントする必要がある場合があります。そのような効果を実現するにはどうすればよいでしょうか。

text-indent

を使用して、

最初の行のインデント

を設定します。その値は、単位付きの長さの値にすることができます。