CSS borderを追加した場合のwidthの収まり

Question

前提・実現したいこと

divをfloatで横並びにして、親のwidthを100%にしました
下記コードだと最後のwidthにborder分が収まらなくなります
どんな端末から見ても、100%ちょうどに設定して、収まる形にしたい
width:20%;を19.5%とかに設定すれば、収まるは収まりますがその分余白が出来てしまいます
borderがあっても100%ピッタリで収める形式にするにはどうしたらいいでしょうか

該当のソースコード

<div style="width:100%;height:20%;background-color:red">
<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">1</div>
<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">2</div>
<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">3</div>
<div style="width:20%;height:100%;float:left;;border-right:solid 1px #424242;">4</div>
<div style="width:20%;height:100%;float:left">5</div>
</div>

Answer 1

とりあえず下記のようなHTMLで試してみてください。

<style>
  * {box-sizing: border-box;}
</style>
<div style="width:100%;height:100px;background-color:red">
<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">1</div>
<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">2</div>
<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">3</div>
<div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;">4</div>
<div style="width:20%;height:100%;float:left">5</div>
</div>

box-sizing: border-box;の意味は、kei344さんの回答のリンク先を参照ください。

現在では、CSSをHTML内に埋め込むのは時代遅れかと。

Answer 2

こちらでいかがでしょうか?

<div style="width:100%;height:20%;background-color:red">
  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">1</div>
  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">2</div>
  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">3</div>
  <div style="width:20%;height:100%;float:left;border-right:solid 1px #424242;box-sizing:border-box;">4</div>
  <div style="width:20%;height:100%;float:left;box-sizing:border-box;">5</div>
</div>

Answer 3

box-sizing: border-box;で。

【CSS box-sizing — 幅と高さの適用方法を制御 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

Comments

[why]

回答ありがとうございます

<div style="box-sizing: border-box;width:100%;height:20%;background-color:red">
<div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">1</div>
<div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">2</div>
<div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">3</div>
<div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">4</div>
<div style="width:20%;height:100%;float:left;;">5</div>
</div>

上記を適応したところ、5番目がありえない位置に表示されます

[why]

なぜこの位置に表示されてしまうのか回答いただけると幸いです

[maisumakun]

</div>と<div>の間に改行が入っているので、その分のスペースが表示されて位置がずれていることが考えられます。改行を入れずに</div><div>と書くか、改行をコメントアウトして</div><!-- （改行） --><div>のようにする、という対策法があります。

[why]

改行を消してみましたが、変わりありませんでした

<div style="box-sizing: border-box;width:100%;height:20%;background-color:red"><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">1</div><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">2</div><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">3</div><div style="width:20%;height:100%;float:left;;border-right:solid 5px #424242;">4</div><div style="width:20%;height:100%;float:left;;">5</div></div>

[kei344]

box-sizing: border-box;はwidth:20%;のところに全部入れてください。