現在サイト模写の為iSaraのページを模写しようとしていました。
そこでheaderにある画像の部分で躓いてしまったため質問させていただきます。
iSaraのheader-logoのimgはしっかりと文字がそろっているのですが、自分のは少しはみ出ています。
そこを直そうと自分は親要素にposition: relative;を使いimgタグに
position: absolute;としつつ、bottom: 0;としたのですが、画像の緑のpaddingの緑の部分の下に揃えられてしまい、うまくいかなくて詰まってしまいました。(自分のスクリーンショットの画像は詰まってしまったのでpositionプロパティは消した後の写真です)どなたかアドバイスお願いします。
以下、現在のコードです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>iSara[イサラ]|バンコクのノマドエンジニア育成講座</title> 6 <link rel="stylesheet" href="css/styles.css"> 7</head> 8<body> 9 <header> 10 <div class="title"> 11 <div class="title-container"> 12 <img src="img/isaralogo.png" width="128" vertical-align="middle"> 13 </div> 14 </div> 15 </header> 16</body> 17</html>
CSS
1body { 2 font-family: Verdana, sans-serif; 3 margin: 0; 4 font-size: 14px; 5} 6 7header .title { 8 height: 75px; 9} 10 11header .title-container { 12 height: 35px; 13 padding: 20px 0; 14 margin: 0 98px; 15} 16 17header .title-container { 18 position: relative; 19} 20 21header img { 22 float: left; 23} 24
画像(img/isaralogo.png)の高さはいくつですか?