CSSでブロックをギャップレスにする方法-フロントエンドQ&A-php.cn

CSSでブロックをギャップレスにする方法

藏色散人

リリース： 2023-01-03 09:31:03

オリジナル

1725 人が閲覧しました

隙間のないブロックを作成する CSS の実装方法: 最初に HTML サンプルファイルを作成し、次にインライン要素のスパンを inline-block 要素として定義し、最後にタグ間のスペースを削除します。

CSSでブロックをギャップレスにする方法

この記事の動作環境: 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>

ログイン後にコピー

効果は次のとおりです。

CSSでブロックをギャップレスにする方法

インラインを削除します。 -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>

ログイン後にコピー

効果は次のとおりです:

CSSでブロックをギャップレスにする方法

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>

ログイン後にコピー

効果は次のとおりです:

CSSでブロックをギャップレスにする方法