CSSでpaddingの異なる要素同士をそろえる

結論

box-sizing: border-box;を使います。

解説

例えば、以下のように指定すると、.class2では中の要素の幅が50%になるように表示されるので、borderで囲われる範囲はpaddingの分だけ大きくなってしまいます。言い換えると、1rem+50%+1remの幅になってしまいます。

style.css

.class1 {
  width: 50%;
  margin: 0;
  padding: 0;
  border: solid;
}
.class2 {
  width: 50%;
  margin: 0;
  padding: 1rem;
  border: solid;
}

そこで、以下のように、box-sizing: border-box;を追加することで、要素の幅とpaddingを足したものがwidth: 50%になるので、paddingの異なる要素同士で、幅をそろえることができます。

style.css

.class1 {
  width: 50%;
  margin: 0;
  padding: 0;
  border: solid;
}
.class2 {
  width: 50%;
  margin: 0;
  padding: 1rem;
  border: solid;
  box-sizing: border-box;
}