backgroundの表示ができない

Question

以下の2つ目のHTMLについての質問です。

1つ目のhtmlが本来自分が意図していたもので、2つ目が意図したものにならず試行錯誤をしていたものです。
それぞれの下に、表示された画像を貼りました。

    <header class="header">
     <h1 class="logo">
       <a href="/">SAMPLE SITE</a>
     </h1>
    </header>

   <header class="header">
    <a href='#' class="logo">
      <h1>sample site</h1>
    </a>
   </header>

適用しているCSS

@charset "UTF-8";

html {
  font-size: 62.5%;
}
body {
  color: #333;
  font-size: 1.2 rem;
  font-family: "Hiragino Kaku Gothic ProN","Meiryo", sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
  color: salmon;
  text-decoration: none;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.header {
  width: 100%;
  height: 140px;
}
/*以下が質問内容のCSS*/
.logo {
  width:250px;
  height: 55px;
  background: url('../images/logo.png') no-repeat;
  margin: 0 auto;
}

###　質問内容

1つ目はbackgroundが適応され、画像が表示されています。
しかし、2つ目では、backgroundが適用されていないのか、画像が表示されず、左端に文字だけが表示されています。
h1にaを入れ子にしたのが原因なのかよくわからない状態です。
回答よろしくお願いいたします。

mac 10.14.4
google chrome

Comments

[kei344]

h1や関係するその他のCSSも提示してください。

[gunmed]

回答ありがとうございます。
追加しました。
他の方の回答があり、解決しました。
以後気をつけますので、今後ともよろしくお願いいたします。

Answer 1

<a>タグに背景画像を適用するためには、cssに「display: block」を適用させるとうまく表示されます。

<a>タグはinline要素なので、display:blockまたはinline-block要素として表示し、要素のサイズを定義する必要があります。

Comments

[gunmed]

回答ありがとうございます。
勉強になりました。