HTML&CSS

CSSで要素間の隙間を埋める方法

またまたWebページの模写中にブロック要素とブロック要素の隙間ってなんやねんってなったので、調べた結果をまとめてみます。

Twittrでも悩みをつぶやきました。

これです。

【結論】スタイルをリセットすればOK

結論からですが、スタイルをリセットすればOKです。

例えばこんな感じです。

無事忌々しい隙間を消すことができました。

スタイルのリセットって?

各ブラウザは「デフォルトCSS(default.css)」にて、要素に対してあらかじめCSSが設定されています。これによって各要素にmarginやpaddingが設定されているので、各要素間に隙間ができてしまっているんですね。

この「デフォルトCSS(default.css)」はブラウザ毎、同じブラウザでもバージョン毎に異なるのでWebページを作成するにあたっては、まずデフォルトCSSをリセットすることから始めるのが不可欠なんです。

Progateかなんかでもそんな話しが出てきた気がしますが、ど模写してる時は忘れしてました・・・。(Twitterでつぶやく前にスタイルのリセットも試したと思うんだけどなぁ・・・。)

リセットCSS

デフォルトCSSのスタイルを打ち消して、ブラウザ間でのスタイルの違いをなくすためのCSSのことです。

今回の例で記述したmarginとpaddingをリセット(0)にするっていうのもめちゃくちゃ簡易的なリセットCSSになります。

でもデフォルトCSSで設定されているのはmarginやpaddingだけではありません。h1のフォントサイズやらなんやと多岐に及びます。

これを一つ一つリセットしていくのは大変なので、世の中には便利なリセットCSSが存在しています。

リセットCSS紹介:HTML5 Doctor Reset CSS

HTML5 Doctor Reset CSSはmargin、paddingを0にし、すべてのスタイルのfont-sizeも統一されます。なのでh1もpも全て同じfont-sizeになるってことです。もちろんfont-weightとかも。

全ての要素がスタイルが付いていない状態となるので、一つ一つ自分でスタイルをあてていく必要がありますが、自分が思うようにコントロールできるので慣れないうちはこれを使ってみたらいいかなと思ってます。

HTML5 Doctor Reset CSS

リセットCSS紹介:Normalize.css

Normalize.cssはmargin、paddingを0にするところはHTML5 Doctor Reset CSSと同じですが、その他のh1やh2などにそれぞれ異なるスタイルがあらかじめあてられています。

そのため一つ一つ自分でスタイルをあてなくても、ある程度は整ったレイアウトを作成することが可能となっていますが、それがかえって邪魔になる時もあるかと思います。

Normalize.css

まとめ

・要素間の隙間はブラウザに設定されている「デフォルトCSS(default.css)」のせい

・Webページを作成する際はリセットCSSでデフォルトCSSを打ち消すとこからはじめる

・リセットCSSは色々公開されているので、好みのものをを使う。(慣れたら自分用にアレンジ)

ABOUT ME
Jyu2
ソフトウェア会社(SIer)で10年以上勤務のシステムエンジニア|ポケットWiFi使用歴2年以上|ポケットWiFi+αで快適でお得なインターネット環境を構築するための情報を発信|その他、IT情報やWebサービス、アプリ、ガジェットなどの情報を発信|自分と他の人のカバンの中身を紹介するメディア「カバンの中身ラボ(https://kaban-no-nakami-labo.com/)」も運営しています。 ポケットWiFi選びに迷ったらTwitter、お問合せフォームからご連絡ください。