フッターでマージン設定をした時に背景も移動するのを回避したいです

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）html/cssでフッターを作成しています

発生している問題

cssで画像のclassにmargin-bottomを加えるとfooter全体が動いてしまい、
background-colorも合わせて上に動いてしまいます。
画像のmargin-bottomを設定してもbackgroundが固定される状態にする方法がわかる方
教えて頂きたいです。よろしくお願いします。

### 該当のソースコード
HTML
<footer id="footer">
　　　 <p class="footer-text">Herto design</p>
      <h1><a href="https://www.instagram.hl=ja"><img class="instagram" src="IMG/instagram.png" alt="instagram icon"></a></h1>
</footer>
-------------
CSS
#footer {
  width: 100%;
  height: 100px;
  background-color: #FFFFFF;
}
.footer-text {
  color: #2F4F4F;
  text-align: center;
}
.instagram{
  width:40px;
  height:40px;
  float: right;
  margin-bottom:100px
}
```HTML/CSS

### 試したこと

.instagramの箇所のmargin-bottomを上げたいと思い100pxで設定してみたところ、
.footerで設定した背景色が移動してしまい、footer部分の下側に余計な余白が発生してしまいました。

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

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

Comments

[kei344]

「margin-bottomを設定しても」とありますが、提示されているコードには書かれていません。質問分は編集できるので、試したコードを書きましょう。

[herto]

色々と試しているときに消えてしまい、気づいておりませんでした。
ご指摘ありがとうございます。編集させて頂きましたので、よろしければアドバイスお願いします。

[kei344]

#footerが100pxしか無いのに、height:40pxとmargin-bottom:100pxなら突き抜けますが、何をどうしたいのでしょうか。

[herto]

heightのpxを考慮せずにmargin-bottomを記述していました。
しかし、#footerの120pxに対して、height:40px; margin-bottom:20pxの場合はフッターの下側に余計な余白は出ないのですが、height:40px; margin-bottom:40pxの場合は余計な余白ができてしまいました。
これには何かルールがあるのでしょうか？
最近勉強を始めた身で理解が浅いため、質問がおかしくなってしまっているかもしれませんが、お許しください。

Answer 1

「Herto design」というテキストと同じくらいの高さにアイコンを表示させたい、ということで合ってますかね？

色々やり方はあると思いますが、テキストをdisplay: table-cell;で中央表示、アイコンはposition: absolute;で#footerの右端に付くようにしました。

※p,h1,aタグなどはそれぞれ余白等がリセットされている前提です。

#footer {
    width: 100%;
    background-color: #ffffff;
    position: relative;
    display: table;
}
p.footer-text {
    color: #2F4F4F;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}
#footer h1 {
    position: absolute;
    top: 50%;
    right: 20px; /*画面の右端からどれくらい離すか指定*/
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.instagram{
    width:40px;
    height:40px;
}

そもそも、インスタのアイコンをなぜh1でマークアップしているのかがちょっと疑問ですが。。

Comments

[herto]

mai1210さん回答ありがとうございます。
参考にさせて頂きます！
インスタのアイコンのマークアップについてご指摘頂いたのですが、
今回初めて記述をしていて右も左もわからない状態なので、汚いコーディングをしてしまっているのですが、
通常はどのようにマークアップするのが正しいのでしょうか？教えて頂けると幸いです。

[mai1210]

<h1>は、セクション内での「大見出し」なので、現在はインスタのアイコンが「フッター内で一番大きい見出し」になっている状態です。

フッターが、インスタについて説明しているセクションなのであればそれでも構わないと思いますが、単純に「インスタあるよ～」くらいの役割であれば、<div>か<ｐ>でマークアップするケースが多いと思います。

[herto]

mai1210さん、
丁寧なご回答ありがとうございます。
<h1>のタグの意味を完全に履き違えて使用していました、
今後は基本的なものを理解して使えるように学習していきたいと思います。
ご指摘ありがとうございました！

Answer 2

margin-bottom で下に余白を付けたらそうなりますね。
margin-top でネガティブマージンを設定して上に移動させると考えればどうですか。

.instagram{
  width:40px;
  height:40px;
  float: right;
  margin-top: -50px;
}

float を使わずに flex でレイアウトすれば悩まずにすみますね。
テキストとアイコンを上下中央配置にするならば、

#footer {
  width: 100%;
  height: 100px;
  background-color: aqua;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-text {
  color: #2F4F4F;
  text-align: center;
}
#footer h1 {
  width:40px;
  height:40px;  
}
.instagram{
  width:100%;
  height:100%;
}

---

テキストはフッター全体の中央、
インスタグラムアイコンは右から指定位置にする場合

#footer {
  width: 100%;
  height: 100px;
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.footer-text {
  color: #2F4F4F;
  text-align: center;
}
#footer h1 {
  width:40px;
  height:40px; 
  position: absolute;
  top: 50%;
  right: 20px; 
  transform: translateY(-50%);
  margin: 0;
}
.instagram{
  width:100%;
  height:100%;
}

Comments

[herto]

ネガティブマージンというものがあるのですね。
試したところ理想通りの形にすることができました。
とても良い勉強になりました！
わかりやすく簡潔なご回答ありがとうございました。

[herto]

hatena19さん、追記でのご回答ありがとうございます！
参考にさせて頂いた上で一つ質問があるのですが、この状態でpng画像の右側に余白を入れようとすると
テキストも一緒に左に移動してしまったのですが、画像のみ左移動にさせてテキストはそのまま中央に配置する方法などありましたら教えて頂きたいです。
お手数ですがよろしくお願いします。

[hatena19]

png画像の配置を他から独立させたいという要件になりますので、position: absolute; で位置決めすることになりますね。

[herto]

hatena19さん、
追記ありがとうございます。
完全に自分が思い描いていた配置にすることができました！
1人では解決できなかったので、teratailを通して、hatena19さんと出会えてよかったです。
今後もわからない時利用させて頂こうと思うので、見つけてくださった際は教えて頂けると幸いです！
今回は本当にありがとうございました！