###前提・実現したいこと
float:left,width:50%にして、上の列に2つの要素、下の列に2つの要素を表示させていました。
しかし、左上の要素のpaddingを変えたところ、形が崩れてしまい、この原因が知りたいと思っています。
###該当のソースコード
html
1<div class="content"> 2 <div class="content-title"> 3 学習する言語 4 </div> 5 <div class="languages"> 6 <div class="language"> 7 8 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png" /> 9 <p class="language-type">HTML & CSS</p> 10 <p>Webページの見た目をつくる言語</p> 11 </div> 12 13 <div class="language"> 14 15 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png"/> 16 <p>jQuery</p> 17 <p>効果やアニメーションを実装できるJavascriptライブラリ語</p> 18 </div> 19 20 <div class="language"> 21 22 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png"/> 23 <p>Javascript</p> 24 <p>動的なウェブサイト構築に用いるプログラミング言語語</p> 25 </div> 26 27 <div class="language"> 28 29 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png"/> 30 <p>Git</p> 31 <p>ソースコードのバージョン管理、共同開発を可能にするツール語</p> 32 </div> 33 </div> 34 35 </div>
css
1.content { 2 width:60%; 3 margin:0 auto; 4 text-align:center; 5 padding-bottom:80px; 6} 7 8.content-title { 9 font-size:32px; 10 margin-top:80px; 11 margin-bottom:10px; 12} 13 14.languages { 15 height:500px; 16} 17 18.language { 19 float:left; 20 width:50%; 21 padding-top:40px; 22} 23 24.language-type { 25 padding:20px 0 10px 0; 26} 27 28
###試したこと
4つの要素全てに或いは右上の要素にも、paddingをいじるクラスをつけると形は整います。逆に言えば、右上の要素か全ての要素にクラスをつけなければ、左上の要素と左下の要素の間隔が大きく開いてしまいます。なぜ左上にだけにクラスをつけたとき、左下の要素と大きく間隔が開いてしまうのでしょうか。
!!明](4a6b60b5dacb170c05651e1b158b021c.png)明](1fca5be6327ab1b24ad55514fb31ae67.png)
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
回答1件
あなたの回答
tips
プレビュー