インライン要素間の隙間をなくす

インライン ブロック要素を使用するときによく発生する問題は、HTML に空白が存在することで、レイアウトに目に見える隙間ができてしまうことです (単語間隔と同様)。

解決策は、HTML マークアップ内の要素間の分離をすべて削除することです。この修正措置により、マークアップが複雑になり、編集中に問題が発生する可能性があることに注意してください。

ライブ サイトとエクスポートされたバージョンの間でデザインの不一致が発生した場合は、次のいくつかの手法を試すことができます。

• 縮小されたコードをエクスポートします: デザイナーのエクスポート モーダル内で、キーボード ショートカット [ctrl+o] を使用して、詳細なエクスポート設定にアクセスします。
• 縮小されたコードを公開します: [ホスティング] タブの [サイト設定] で、[公開オプション] セクションに移動し、[HTML を美しくする] の選択を解除します。
• フロートを活用する: 代わりに float プロパティの使用を検討してください。要素を中央揃えにするには、Display: Inline Block を使用して要素を Div ブロックで囲みます。
• 負のマージンを適用: インライン ブロック要素によって生じる余分なスペースを、わずかな負の左/右マージンを追加することで相殺します。
• フォントサイズをゼロに調整します: 親要素のフォント サイズを 0px に設定し、インライン ブロック要素のフォント サイズを明示的に定義します。