ホームページ > 記事 > ウェブフロントエンド > CSSでブロックをギャップレスにする方法
CSSでブロックをギャップレスにする方法
- 藏色散人オリジナル
- 2021-03-22 16:09:541701ブラウズ
隙間のないブロックを作成する CSS の実装方法: 最初に HTML サンプル ファイルを作成し、次にインライン要素のスパンを inline-block 要素として定義し、最後にタグ間のスペースを削除します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 パソコン
最近モバイルページを作る場合、インラインで作成することが多いです。 used Block 要素はレイアウトに使用されますが、必ず問題が 1 つ発生します。それは、インライン ブロック要素間のギャップです。これらのギャップはレイアウト上の問題を引き起こすため、ギャップを除去する必要があります。ここでは、インラインブロック要素とギャップを削除する方法について簡単にまとめます。
注: HTML では、div、p、hx、form、ul、li、dl、および dd はブロックレベルの要素です。
インラインブロックとは何ですか?
inline-block はインライン ブロックであり、CSS 要素の分類では、インライン要素またはインライン要素、ブロックレベル要素、およびインライン ブロック要素の 3 つのタイプに分類できます。
インライン ブロック要素には、インライン要素とブロック レベルの要素の特性があります。(1) 要素を水平方向に配置できます。(2) ブロック レベルの要素として使用して、次のようなさまざまな属性を設定できます。 、高さ、パディングなど。
例 1: インライン要素のスパンをインライン ブロック要素として定義します。
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>効果は次のとおりです。
インラインを削除します。 -block div にギャップを発生させる方法:
1. タグ間のスペースを削除します
要素間にギャップが生じる理由は、要素タグ間のスペースです。スペースを削除すると、ギャップは解消されます。自然に消えてしまいます。
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>这是一个div</div><div>这是一个div</div><div>这是一个div</div>
</body>
</html>効果は次のとおりです:
2. すべての div を同じ div に配置します
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</div>
</body>
</html>効果は次のとおりです:
3. 親要素の font-size:0 を設定することでこの問題を解決します
この方法は画像のみを含む div に適しています
[推奨学習: css ビデオ チュートリアル ]
以上がCSSでブロックをギャップレスにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。