Q&A
Progateにて、HTML,CSSの演習を行っております。その際に疑問が生じました。
ヘッダーを作成する演習でしたのですが、わかりやすいように写真1のようにpを赤、ulを緑、ヘッダーを水色でわけております。赤、緑、そして緑の親要素となるliは横並びにするためinline-blockとし、隙間をなくすためにheaderのfont-sizeを0にしました。
ここで、緑色のulが上端からかなりずれていることが気になりました。特にpadding,marginなど設定しているわけではないため、どうして上端から始まらないのでしょうか？
試しに赤の幅を変化させたところ、写真2のように連動して緑の位置も変化しました。どうしてこのようなことが起こるのかが知りたいです。
コードは以下になります。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 <header> 10 <p class=title>Progate</p> 11 <li> 12 <ul>プログラミングとは</ul> 13 <ul>学べるレッスン</ul> 14 <ul>お問い合わせ</ul> 15 </li> 16 </header> 17 </body> 18</html>
CSS
1/* リセット */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, 5form, input, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18/* ここから */ 19header{ 20 background-color:#26d0c9; 21 color:white; 22 height:90px; 23 font-size:0; 24} 25 26 27 28.title{ 29 display:inline-block; 30 font-size:36px; 31 padding:2px 40px; 32 background-color:red; 33} 34 35li{ 36 display:inline-block; 37 background-color:blue; 38} 39 40ul{ 41 display:inline-block; 42 background-color:green; 43 font-size:16px; 44 padding:0 20px; 45} 46
よろしくおねがいします。
回答1件
0
ベストアンサー
ul要素の表示をinline-blockに変更しているので、vertical-alignによる上下方向の位置設定の影響を受けます。初期値はbaselineなので、p要素のテキストのベースラインと揃って表示されました。
たとえば、ul要素のスタイルを以下のように変更してみてください。
CSS
1ul { 2 display: inline-block; 3 vertical-align: top; 4 (以下略) 5}
投稿2020/09/10 15:03
編集2020/09/10 15:05
総合スコア11990
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/11 01:12