h1タグのデフォルトマージン値を0にしても、h1に書いたテキストの開始位置を要素の先頭から表現させたい

Question

前提・実現したいこと

html5とcss3でwebデザインデータをもとに模写しています。
ブロック内にあるh1タグのmargin-topの値を0にすると、h1のテキスト内容の開始位置がずれてしまいます。
これをずれない様にしたいです。
よろしくお願いします。

発生している問題

h1コード内に書かれた「かわいいのは、うさぎ。」の「か」の位置を
h1要素内の左端から表示させたいのですが、h1のmargin-topの値を0にすると添付図のようになってしまいます。

該当のソースコード

    <div class="wrapper">
        <div class="container">
            <div class="content">
                <h1>かわいいのは、うさぎ。</h1>
                <p>うさぎは世界で一番かわいい動物です。どうしてこんなにかわいいのでしょうか？今回はうさぎに癒されながらサイトを作っていきましょう。</p>
            </div>
            <button type="button" class="btn btn-pink">うさぎとは?</button>
            <button type="button" class="btn btn-white">うさぎの可愛さの秘密</button>
        </div>
    </div>

.wrapper {
    background-image: url(./img/bg.png);
    background-repeat: repeat;
    width: 1280px;
    height: 595px;
    margin: 0 auto;
}

.content {
    width: 400px;
}

.content h1 {
    margin-top: 0px; /* 該当箇所 */
    line-height: 1;
    font-size: 36px;
}

エラー発生前

h1のmargin-topの値を0にする前(=初期値)の場合、添付図の様に要素内の左端から文字が表示されています。
この状態だと、margin分の余計な空白ができてしまうので、削除したいです。

補足情報（FW/ツールのバージョンなど）

html5, css3,

追加ソースコード

header部分

    <header>
        <div class="container">
            <div class="header-left">
                <img src="./img/logo.png" width="160" height="60" alt="ロゴ">
            </div>
            <div class="header-right">
                <button type="button" class="btn btn-pink">お問い合わせ</button>
            </div>
        </div>
    </header>

header {
    height: 90px;
    width: 1280px;
    margin: 0 auto;
}

.container {
    width: 1080px;
    margin: 0 auto;
}

.header-left {
    float: left;
}

.header-left img {
    padding: 15px 0;
}

.header-right {
    float: right;
}

.header-right {
    padding: 21px 0 ;
}

Answer 1

上のソースコードだけだときれいに表示されます。おそらく、Bunny!というロゴのせいでそのようなことになっているのでしょう。そこの部分のソースコードも張り付けていただくか、h1のmargin分、.wrapperにpadding-topを設定すればよいと思います。

Comments

[kazuhito0106]

soliste16様
回答ありがとうございます！
.wrapperにpadding-topを設定すると解決できましたが、なぜ解決できたのかが分からないですが。。
contentの親要素であるwrapperにpaddingが無いのが原因？？
Bunny!というロゴが書かれたheaderのソースコードも添付させていただきます。

[soliste16]

wrapperの上端は基本的には中の要素がある部分に設定されます。この場合ではh1の文字の上端がその部分になります。問題はh1のmarginはwrapperの上端に含まれないということです。これによりwrapperの上部にh1のmargin分の空きができてしまいます。しかしwrapperにpaddingを設定するとpadding部分には背景が表示されるので空白がなくなったようになるということです。代わりにmarginを加えても、marginはwrapper要素の外側と認識されるので背景はつきません。デベロッパーツールでwrapperを見ながらpaddingを変えてみると理解しやすいと思います。

[kazuhito0106]

paddingだと要素内の距離を指定するので背景も加わることから、空白ができなくなるのですね。
検証ツールで変えながらやってみると理解できました！
ありがとうございました！