HTML＆CSS レイアウトの調整(隙間の埋め方、横並びの仕方)

Question

前提・実現したいこと

HTML&CSSを使って模写コーディングをしています。
※モデルとなるWebページ➡(https://haniwaman.com/sample/part3/template_08/)

発生している問題・エラーメッセージ

横に5つ並んでいるメニューの「トップページ」
～「アクセス」のレイアウトを調整したいのですが、以下の2点の問題がどうしても出てしまいます。
１．padding, margin共に0に指定しても横の隙間が埋まらない。
２．5つのメニューが横並びにならず、1つだけ改行された形になる。

該当のソースコード

 <div class="top-wrapper">
      <ul>
        <li><a class="btn home" href="#">トップページ<br>HOME</a></li>
        <li><a class="btn clinic" href="">医院紹介<br>CLINIC</a></li>
        <li><a class="btn service" href="">診療案内<br>SERVICE</a></li>
        <li><a class="btn staff" href="">院長・スタッフ紹介<br>STAFF</a></li>
        <li><a class="btn accessff" href="">アクセス<br>ACCESS</a></li>
      </ul>    
    </div>

.top-wrapper ul {
  list-style-type: none; 
  height: 74px;
  width: 1040px;  
}

.top-wrapper li {
  display: inline-block; 
  width: 208px; 
  margin-right: 0;
  border: 1px solid #6CC6C4; 
  text-align: center; 
  padding-top: 12px; 
  padding-bottom: 12px; 
}

.top-wrapper {
  margin-left: auto;
  margin-right: auto;  
  width: 1040px;
}

試したこと

１について、検証ツールを用いてmargin,paddingを調べましたが、ちゃんと0になっているにも関わらず謎の隙間が依然として出ていました。

２について、top-wrapperの横幅の長さを指定することで、各メニューのwidthを20％にしたときに均等に並ぶと考えましたが、できませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

質問とは関係ないですが。
最近、このページを模写している人が多いみたいなんですけど、このレイアウトはフロートを使った古い手法で、いま新しいページをデザインするならまず採用しないやり方だと思います。
私見ですが、5年前ならともかく、いま、このページを模写してもあまり勉強にはならないと思いますよ。

[Kindy]

なるほど、、そうなんですね！
私自身まだ駆け出しの状態なので、色んなタイプのwebサイトを作れるようになればと思って練習している段階です。もしよろしければ、より勉強になるデザインやwebサイトモデルを教えていただけると幸いです、、
ご指摘ありがとうございます！

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

.top-wrapper liに対してbox-sizing: border-boxを追加してみては如何でしょうか

Comments

[FrontEnd_Japan]

追記

親(UL)がwidth: 1040px
子(LI)がwidth: 208px; border: 1px solid #6CC6C4; = 210px * 5 = 1050px
`box-sizing: border-box`を使用するとborderを含めてwidthが208pxに収まる様になります。

[FrontEnd_Japan]

wing283様のご指摘も合わせてソースコードを修正したサンプルを作成したのでご確認ください><

サンプル
https://codepen.io/FrontEnd_Japan/pen/WNraYEJ

[Kindy]

うわ！すごい丁寧にありがとうございます！
無事修正することができました！

ただ、box-sizingの適用方法は理解できたのですが、どうしてfont-sizeを指定することで隙間を埋めることができたのはイマイチ分かりません????そこの部分の説明をしていただけると幸いです、、、

[FrontEnd_Japan]

まずinline-blockの隙間はソースコードの改行によるものです。
これを打ち消すために親要素に対してfont-size: 0px; を指定することがあります。

[Kindy]

自分でも調べてみて、inline-blockの要素そのものに「文字」の特徴があることがfont-sizeを指定する理由になっていると分かりました！非常に勉強になりました、ありがとうございます

[FrontEnd_Japan]

横並びにする要素としては、flexプロパティがあるので閲覧環境がflex未対応でなければflexを使用することをおすすめします。
display: inline-block; は隙間問題などがあるので、最近はあまり使用しないです。

Answer 2

ul { font-size:0;}
ul li { font-size:任意px;}
にすればいいかと。

Comments

[Kindy]

修正できました！ありがとうございます！
ただイマイチfont-sizeの適用方法理解しきれていないのですが、「隙間を埋めたいときはfont-sizeを指定する」という理解で大丈夫でしょうか？お時間あれば教えていただけると幸いです、、、

[wing283]

FrontEnd_Japan様の回答に加えるならinline-block自体が文字の要素となるために親要素の文字ポイント数を一度リセットする必要があります。
ul liにdisplay:inline-blockをかける場合はそうした方が「無難」という解釈で認識しています。

ちなみにbox-sizeingを使わないやり方としてcalcがあります。
width: calc(100% / 5 - 2px);
をliに入れると、ul 100%に対して5等分し、かつ両脇のborder2pxを引くと言うものです。
レスポンシブ対応の際、pxにするとメディアクエリでいちいちpxを書かなくてもcalcひとつで対応できてしまうので、calcを覚えるととても便利ですよ＾＾

[Kindy]

非常に分かりやすく説明してくだざってありがとうございます！inline-blockについては理解できたので、すごく納得してコードを修正できました。
またcalcについても知らない知識だったので教えていただいて非常に勉強になりました！貴重な時間ありがとうございます！