Progate上級編フッターの画像とpタグの間の空白を消したい

前提・実現したいこと

初めて質問させて頂きます。

現在Progate上級編の模写をしているのですが、
フッターのロゴ画像とpタグの間に見本にはない空白がでてしまうので、
これを無くしたいです。

解決方法をご存知の方いらっしゃいましたら、ご教授ください。

見本

自分が作成したもの

発生している問題・エラーメッセージ

該当のソースコード

HTML
1<footer>
2     <div class="container">
3          <img src="https://prog-8.com/images/html/advanced/footer_logo.png" alt="">
4          <p>Learn to code, learn to be creative.</p>
5     </div>
6</footer>

CSS
1.container{
2    max-width: 1170px;
3    padding: 0 15px;
4    margin: 0 auto;
5}
6footer{
7    padding-top: 30px;
8    padding-bottom: 20px;
9}
10footer img{
11    width: 125px;
12}
13footer p{
14    color: #b3aeb5;
15    font-size: 12px;
16}

試したこと

Google Chromeの検証機能を使って確認してみたのですが、paddingやmarginはありませんでした。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

別のコードでCSSのフッターに関連するスタイリングをしていない前提で回答します。

今のコードですと、pタグのmarginがついたままになっていると思うので、余白を削除する場合は以下のように書く必要があると思います。

css
1footer p{
2    color: #b3aeb5;
3    font-size: 12px;
4    margin: 0; // 追加
5}

さらに余白を詰めたい場合は、imgのvertical-alignを修正するといいと思います。

css
1footer img{
2    width: 125px;
3    vertical-align: bottom; // 追加
4}

投稿2020/02/23 04:01

総合スコア665

2020/02/23 04:34 編集

早速のご回答ありがとうございます！ CSSの最初に *{ padding: 0; margin: 0; } と書いてあるので、pタグにはmarginはなかったみたいです。その後、vertical-alignを使ってみると見本と同じようなレイアウトになりました！見本のCSSを見るとvertical-alignは入っていないので、なぜ自分の作ったものにだけ余分な空白が出てしまったのかは謎のままですが、解決できたので良かったです♪

行動規範の内容に同意します