【長年の悩み】結局『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。
と思ったのですがいかがでしょうか・・・。
まとめ
今回は少し自分が気になったことを記事にしてみました。
アババイで、この問題が解決される日は来るのでしょうか・・・？
今回はこの辺で。
では(´∀｀*)ﾉｼ
