【長年の悩み】結局『border』って外側なの?内側なの?

おはこんばんちわ。どらごんです。
先日、27歳になりさらに老け込んだ今日この頃です。
さて、そんな誕生日のこと。
鬼上司の松崎と、こんな話をしていました。
「長年の悩みなんだけどさぁ~」
「?」
「『border』って外なのかな?内なのかな?」
「!・・・言われてみれば不明確ですよね。」
「とくに困るわけじゃないんだけど、なんとなく気になるよね」
「今回のブログそのネタにしますね」
ということで、今回は
『border』って外?内?
について少し勉強したいと思います。
そもそもborderとは?
『border』とはcssスタイルの一つです。
上の画像だと、黄色の線の部分です。
これを画像ではなく、cssで色や太さなどを指定することができます。
また、border-bottomやborder-topなど、一部分だけ指定することも可能な
とても便利なcss。
では本題。
果たしてborderは外側なのか。内側なのか。
Google chrome
手始めに一番よく使っているGoogleで検証しました。
結果としては、paddingよりは外だけどmarginよりは内側・・・。
答え:中途半端
Googleでも答えが分からないことがあるとは。さすがのGoogleも
神にはなれないのか・・・!
ハイ次。
firefox
結構使っているユーザーも多いと思われる『firefox』でも検証。
これも微妙・・・。
chromeよりははっきりしてはいるんだけど、なんとなく
分かりにくい・・・。
答え:chromeと同じ
ハイ次。
InternetExplorer
セキュリティが心配なIEはどうでしょうか?
一緒!
chromeとほぼ同じでした。
答え:chromeと同じ②
ハイ次。
Microsoft Edge
IEと同じだったため割愛・・・( ^ω^)
分かったこと
分かったことはほとんどありませんでしたが、
僕らが気になったことに関する記事がほとんどないということは、
みんなそれほど気にしていないのではと思い始めました・・・。
考察としては、
外と内に半分ずつ振り分けられる
※例としては、borderが2pxなら、内側に1px、外側に1px。
と思ったのですがいかがでしょうか・・・。
まとめ
今回は少し自分が気になったことを記事にしてみました。
アババイで、この問題が解決される日は来るのでしょうか・・・?
今回はこの辺で。
では(´∀`*)ノシ