Q&A
発生している問題・エラーメッセージ
エラーメッセージはなし。 画像と親要素に謎の隙間が生まれてベースラインに合わせれない。
該当のHTML , CSSソースコード
<!DOCTYPE html> <html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="shortcut icon" href="img/favicon.ico"> <meta name="description" content="子供から大人まで、プログラミングを学ぶなら 、Codera"> <title>準備を済ませたテンプレート</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styls.css"> </head> <!-- 本文 --> <body> <header> <div class="head"> <div class="head-inner1"> <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="iSara"> </div> <div class="head-inner2"> <p>バンコクのノマドエンジニア育成講座</p> </div> <div class="head-right"> <p>お問い合わせ / 資料請求はこちら</p> </div> </div> </header> <!-- /header --> <!-- footer --> <footer> </footer> <!-- /footer --> </body> </html>
body,html{ font-size: 1.1vw; } header{ width: 90%; margin: 0 auto; } .head{ display: flex; padding: 20px 0; align-items: baseline; } .head-inner1 img{ width:100%; } .head-inner1{ width: 11%; } .head-inner2 p{ margin-bottom: 0; } .head-right{ margin-left: auto; width: 25%; } .head-right p{ text-align: center; margin: 0; border: 1px solid #333; border-radius: 8%/50%; padding: 10px; }
補足情報（FW/ツールのバージョンなど）
模写です。デベロッパーツールを確認しましたがわかりませんでした。
回答1件
0
何故余白が出来てしまうのかは自分もわからないですが、以下のコードで直せそうです。
** 参考URL **
divで囲んだimgタグの下にできる余白を消すCSS
css
1.head-inner1 img{ 2 width:100%; 3 vertical-align: bottom /* 追加 */ 4}
投稿2019/07/04 06:58
総合スコア683
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。