7

HTML に関する私の最大の不満は、改行によって要素間にわずかなスペースが追加されることです。( jsFiddle。)

これにより、子要素が親にぴったり合うようにサイズ設定されているレイアウトが台無しになる可能性があります。

次のようなコメントを使用して、コードをある程度読みやすく保ちながら、この暗黙的なパディングを削除できることをどこかで読みました。

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->

これは機能しますが、より良い解決策が必要だと感じています。改行パディングを回避するには、他にどのような方法がありますか?

4

4 に答える 4

4

それは「少しのスペース」ではなく、文字通りスペース文字です。要素を水平方向に配置するために使用display: inline-blockしています。これが「インライン」の仕組みです。

使用inline-blockする場合は、要素間の空白を削除する必要があります。

それ以外の場合は、フローティングや など、他の方法のいずれかを使用して水平方向に整列できますdisplay: table-cell。

于 2011-08-25T08:51:14.227 に答える
1

これはdisplay: inline-block;、div要素に使用するためです。

ブロック要素は周囲の空白を削除しますが、インライン要素は削除しません。

float: left;代わりに試してください。

于 2011-08-25T08:50:46.943 に答える
1

解決策は、この例のように、ページを公開する前に HTML コンプレッサーを使用して、マークアップから不要なスペースを削除することです。

私が見たところによると、彼らは常に少なくとも 1 つのスペースを残す傾向があります。なぜなら、そのスペースが本当に必要かどうかわからないからです。複数のスペースがある場合、ブラウザーは最初のスペースのみを考慮するため、コンプレッサーは残します。そこに1つのスペース。

于 2011-08-25T06:57:39.827 に答える
1

font-size:0px; を試す必要があります。外側の div の場合は line-height:0px です。

このようなもの：

<div class="outer">
  <div class="inner">123</div>
  <div class="inner">34556</div>
</div>

<style>
.outer {
  font-size:0px;
  line-height:0px;
}

.inner {
  font-size:14px;
  line-height:16px;
  display:inline-block;
}
</style>
于 2011-08-25T08:41:19.217 に答える