footerを横並びにしたい（flex、ブロック要素、インライン要素）

Question

「シリアルナンバー/製造年対応」の箇所だけ浮いてしまいます。
ブロック要素とインライン要素が関係しており、display: inline-block; を使用するみたいなんですが上手くいきません。ブロック要素とインライン要素をサイトを読んで学習するだけでは上手く理解出来てないのもありますが、footer-item p から右側footer-item p の高さに並べたいです。どなたか助けて下さい！

   <footer>
       <div class="footer-down">
         <div class="container-jg">
           <div class="footer-box">
             <div class="footer-item">
               <p>AAAAAA</p>
             </div>
             <div class="footer-item">
               <div class="fotter-text">
                 <a href="...">>シリアルナンバー/製造年対応表</a>
               </div>
             </div>
             <div class="footer-item">
               <div class="footer-logo">
                 <a href="..." alt="ロゴB"/></a>
               </div>
             </div>
             <div class="footer-item">
               <div class="footer-logo">
                 <a href="..." alt="ロゴC"/></a>
               </div>
             </div>
           </div>
         </div>
       </div>
   </footer>

footer {
  width: 1920px;
}

.footer-upper{
  height: 114px;
  background: #efefef;
}

.footer-upper p{
  font-family: YuMincho;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #444;
}
.footer-upper p{
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer-down{
  height: 69px;
  background-color: #000;
}
.footer-box{
  display: flex;
  width: 100%;
}
.footer-item:first-child{
  margin-right: auto;
  height: 50px;
}

.footer-item p{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 16px;
  text-align: left;
  color: #fff;
  padding-top: 27px;
  padding-bottom: : 26px;
}
.footer-item a{
  font-family: YuMincho;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 22.4px;
  text-align: left;
  color: #fff;
}
.footer-text a{
  padding-right: 30px;
}
.footer-text a{
  text-decoration: none;
}
.footer-logo img{
  padding-left: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}

Answer 1

＞ footer-itemをきれいに横並びにしたい

.footer-item pに上パディングがついているため下に下がっていると思いますので、それを削除してはどうでしょうか。

.footer-item p{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 16px;
  text-align: left;
  color: #fff;
  /* padding-top: 27px; */
  padding-bottom: : 26px;
}

もし、リセットCSSを使っていないなら、margin:0でデフォルトCSSのマージンも打ち消す必要があると思います。

---

コメントを受けて追記

.footer-item aに同じパディングを当てればいいかもしれないですね。

.footer-item a{
  padding-top: 27px;
}

Comments

[shin]

footer-item p
の高さにfooter~item a の3つを並べたいです。

[Lhankor_Mhy]

質問に記述することをおすすめします。

[shin]

ご指摘ありがとうございます。変更しました！