ホームページ > 記事 > ウェブフロントエンド > HTML のインラインブロックの空白を削除する方法

HTML のインラインブロックの空白を削除する方法

不言オリジナル: 2018-06-11 17:39:091863ブラウズ

この記事では主に、HTML の Inline-Block を素早く削除する 5 つの方法を詳しく紹介します。興味のある方は参考にしてください。

「inline」要素のマージンとパディングを制御する必要がある場合、inline-block 属性値が非常に役立ちます。これにより、これらの要素を「ブロック」および「フロート」にする必要がなくなります。しかし、問題があり、インラインブロックを使用すると、HTML 要素間の空白がページ上に表示されてしまいます。とてもうるさい。これらの空白を削除する方法はいくつかありますが、そのうちの 1 つは非常に賢いものです。

方法 1: 要素間にスペースを残さない

この問題の 100% の解決策は、HTML コード内の要素間にスペースを残さないことです:

<ul>   
<li>Item content</li>   
<li>Item content</li>   
<li>Item content</li>   
</ul>

もちろん、これは見た目が厄介です。コードは保守が困難ですが、非常に実用的で、非常に直観的で、さらに重要なことに...非常に信頼性があります。

方法 2: 親要素に font-size: 0 を設定する

この空白の問題に対する最善の解決策は、これらのインラインブロック要素の親要素に font-size: 0 を設定することです。 64349c75da2f924823fe3c3e91a71ff3 にインラインブロック 8c0e9d2c5e6a7ea41578d97b4d80f7d8 がある場合は、次のようにすることができます:

.inline-block-list { /* ul or ol with this class */   
 font-size: 0;   
}   
.inline-block-list li {   
 font-size: 14px; /* put the font-size back */   
}

親要素のフォントサイズが子要素に影響しないようにするには、フォントを再設定する必要があります。 -size を子要素に指定する場合、これは通常は単純です。問題が発生する可能性があるのは、フォントを相対サイズで設定した場合のみです。しかし、ほとんどの場合、この方法で問題は解決します。

方法 3: HTML コメント

この方法は少し乱暴ですが、それでも機能します。 HTML 要素間のスペースをコメントで埋めると、間に空白が存在しなかった場合と同じ効果が得られます。

<ul>
 <li>Item content</li><!-- 
 --><li>Item content</li><!-- 
 --><li>Item content</li>
</ul>

一言で言えば...うんざりです。一言で言えば...とても嫌だ。 3 つの言葉で言うと…わかりました。しかし、それはうまくいきます！

方法 4: ネガティブマージン

方法 2 と非常に似ています、申し訳ありません。インラインブロックの柔軟性を利用して、空白を隠すために負のマージンを設定することができます:

.inline-block-list li {   
 margin-left: -4px;   
}

さまざまな状況を考慮する必要があり、場合によっては予期しない空白が表示されるため、この方法は最もお勧めできません。この裏技は使わないほうがいいでしょう。

方法 5: 先頭から末尾まで

HTML タグを活用するもう 1 つの方法は、要素の終了タグと次の要素の開始タグを近くに配置することです:

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

それほど見苦しくありませんHTML コメントとして使用できますが、コードの読みやすさを考慮せずに、これらの空白を手動で削除します。

理想的な方法はありませんが、Web ページに空白を残さないのも悪い方法です。これは、インラインブロックの使用に対する警告ではありません。インラインブロックは、その中に表示される空白の処理方法を理解する必要があるだけです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

HTML のインラインブロックの空白を削除する方法

関連記事