CSSコーディング。謎の余白ができた時の2つの対処法

CSSコーディング。謎の余白ができた時の2つの対処法

CSSでブロックや画像をレイアウトする時に思ってもいない場所に余白ができた経験はないでしょうか。

そこで今回は初心者向けにこの余白を無くす方法について解説していきます。

今回紹介する方法は以下の2つです。

  • marginとpaddingを『0』にする方法
  • リセットCSSを使う方法

それではそれぞれの方法を、実際の謎の空白を見ながら見てみましょう。

Advertisement

謎の空白を見てみよう

まずはこの空白が起きる現象を、意図的に起こしてみたいと思います。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>marginとpadding</title>
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <header>
                <div class="mainbox""></div>
                <div class="subbox"></div>
        </header>
    </body>
</html>

CSS

.mainbox{
    position: relative;
    width: 400px;
    height: 300px;
    background-color: burlywood;
}
.subbox{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    top: 0;
    margin: 0;
}

ブラウザ表示

この現象は、ブラウザが固有で持つデフォルトのCSSによって引き起こされています。

※ブラウザによっては、今回のソースコードで再現されない場合があります。

marginとpaddingを『0』にしてみよう

ブラウザのデフォルトのCSSで知らぬ間に『margin』と『padding』が設定されている場合があります。

この場合は親要素にmarginとpaddingを『0』の設定にすると解決します。

では早速CSSへこの設定をしてみましょう

CSS

body{
    margin: 0;
    padding: 0;
}
.mainbox{
    position: relative;
    width: 400px;
    height: 300px;
    background-color: burlywood;
}
.subbox{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    top: 0;
    margin: 0;
}

ブラウザ表示

謎の余白は消え、綺麗にブロックが上揃えになったことが確認できます。

しかしこの方法では、謎の空白を無くすだけのデフォルトのCSSをリセットしたことにしかなりません。

すごい😳
簡単に上揃えになった💦

そうだね🍎
でもブラウザは、その他にもデフォルトでCSSが設定されているんだ👀

えっ💦
そうなの❓

うん🍎
だから次から解説するコード使ってその他のCSSもリセットしてみようね✨

リセットCSSを使おう(HTML5 Doctor CSS Reset)

この方法は、リセットCSSと言われるコードをCSS内に記述して使用する方法です。

あらゆるサイトで使用されています。

また、今回紹介する方法は『HTML5 Doctor CSS Reset』で比較的使い易いコードであると言われています。

それでは実際に、CSSにリセットCSSをコーディングしてみましょう。

先程のコードに、以下のコード(1〜94行目)を追記します。

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000; 
  font-style:italic;
   font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

.mainbox{
    position: relative;
    width: 400px;
    height: 300px;
    background-color: burlywood;
}
.subbox{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    top: 0;
    margin: 0;
}

ブラウザ表示

いかがでしょうか。

うまくブロックが上揃えになっていますね。

リセットCSSは『margin』や『padding』だけではなく、他のデフォルトのCSSをリセットしてくれます。

便利なのは分かったけど、すごく長いコードで覚えられる気がしない😩

そうだよね😅
だけどこのリセットCSSはコピペして使っても良いよ🍎

サイト制作などでは、一つ一つをリセットしながらでは大変ですよね。

また、サイトではあらゆるブラウザでの対応も要求されます。

今回紹介できていないコードもありますので、是非自分にあったリセットCSSを見つけてみてはいかがでしょうか。

CSSカテゴリの最新記事