» 【長年の悩み】結局『border』って外側なの?内側なの?|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

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

スタッフブログ

  • 2019.07.26

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

    顔アイコン

     

     

     

    おはこんばんちわ。どらごんです。

     

     

     

     

     

    先日、27歳になりさらに老け込んだ今日この頃です。

     

     

    さて、そんな誕生日のこと。

    鬼上司の松崎と、こんな話をしていました。

     

     

     

    s_matsuzaki「長年の悩みなんだけどさぁ~」

    r_kaneko「?」

    s_matsuzaki『border』って外なのかな?内なのかな?

    r_kaneko「!・・・言われてみれば不明確ですよね。」

    s_matsuzaki「とくに困るわけじゃないんだけど、なんとなく気になるよね」

    r_kaneko「今回のブログそのネタにしますね」

     

     

    ということで、今回は

    『border』って外?内?

    について少し勉強したいと思います。

     

     

    そもそもborderとは?

    『border』とはcssスタイルの一つです。

    border

    上の画像だと、黄色の線の部分です。

    これを画像ではなく、cssで色や太さなどを指定することができます。

    また、border-bottomやborder-topなど、一部分だけ指定することも可能な

    とても便利なcss。

     

     

    では本題。

    果たしてborderは外側なのか。内側なのか。

     

     

    Google chrome

    手始めに一番よく使っているGoogleで検証しました。

    emyu

     

    結果としては、paddingよりは外だけどmarginよりは内側・・・。

    答え:中途半端

     

    Googleでも答えが分からないことがあるとは。さすがのGoogleも

    神にはなれないのか・・・!

     

     

     

     

     

     

    ハイ次。

     

     

     

     

     

    firefox

    結構使っているユーザーも多いと思われる『firefox』でも検証。

    fox

    これも微妙・・・。

    chromeよりははっきりしてはいるんだけど、なんとなく

    分かりにくい・・・。

    答え:chromeと同じ

     

     

     

     

     

    ハイ次。

     

     

     

     

     

     

    InternetExplorer

    セキュリティが心配なIEはどうでしょうか?

    ie

    一緒!

    chromeとほぼ同じでした。

    答え:chromeと同じ②

     

     

     

     

     

    ハイ次。

     

     

     

     

     

    Microsoft Edge

    IEと同じだったため割愛・・・( ^ω^)

     

     

     

     

    分かったこと

    分かったことはほとんどありませんでしたが、

    僕らが気になったことに関する記事がほとんどないということは、

    みんなそれほど気にしていないのではと思い始めました・・・。

     

    考察としては、

    外と内に半分ずつ振り分けられる

    ※例としては、borderが2pxなら、内側に1px、外側に1px。

    と思ったのですがいかがでしょうか・・・。

     

     

     

     

     

     

    まとめ

    今回は少し自分が気になったことを記事にしてみました。

    アババイで、この問題が解決される日は来るのでしょうか・・・?

    今回はこの辺で。

     

     

     

     

     

     

     

    では(´∀`*)ノシ

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2019年8月
« 7月    
 1234
567891011
12131415161718
19202122232425
262728293031  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス