LoginSignup
21
21

More than 5 years have passed since last update.

input要素のtext属性(他)の左内側の余白を空ける方法

Last updated at Posted at 2016-02-18

メモしておく。

<input type="text">

スマフォやタブレットを考慮して、width属性を横幅いっぱいに設定しておきたい。

input {
  padding: 0 0 0 2%;
  width: 98%;
}

横幅は100%にするのに、width + padding-left = 100%で当然考えるわけで。
けど、この2%って相対指定なので、スマフォを横にしたり、タブレットのような解像度のものであったりするとデバイスによって左の余白が空きすぎてしまうので、これを固定(一定)にしたかった。

うんうん悩んで、隣の席のエンジニアに聞いてみたら、あっさり解決した。

input {
  text-indent: 1em;
  width: 100%;
}

きれいに空いた!\(^o^)/
単純だけど気付かなかった自分にビンタしたい。頭固くなってるのかな...... :scream:

21
21
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
21