ログイン
問題11

コードを修正して正しく表示しよう2

アイコン画像

問題11:コードを修正して正しく表示しよう2

今回はよく使うinputタグについての問題です。
初心者の方がほとんどつまずくポイントかと思います。
inputのheightをinheritにより親要素と同じ高さにしたつもりが、親要素を飛び出してしまっています。

エディターのアイコンあらかじめエディタに書くコード

                <div class="box">
  <input type="text" placeholder="キーワード">
</div>
¥HTML¥
              
                .box{
  background-color: #dddddd;
  width: 300px;
  height: 40px;
}
.box input{
  height: inherit;
}
¥CSS¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              .box input{
  box-sizing:border-box;
}
¥CSS¥
            

コメントのアイコン解説

cssは初期値ではheightにpaddingとborderの分の幅を含みません。そのためbox-sizingにborder-boxを適用して、heightにpaddingとborderの両方を幅に含ませる必要があります。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる