liの大きさがliの中にあるa要素のサイズよりも大きくなってしまう

Question

liの中にaタグを入れた

<li><a href="#">~~~~~~~</a></li> という感じのコードなのですが、 a要素の大きさよりもli要素の大きさのほうが少しだけ大きくなってしまいます。 font-sizeをli,aどちらに指定しても同じ結果になりました。 liと中にあるaタグの大きさを揃えるにはどうしたらいいでしょうか？ 詳しい方教えていただけるとうれしいです。

追記

ちなみにコードはこんな感じです。
liのpaddingとmarginは0になっています。
liの要素そのものの大きさが少しだけ大きくなっている状態です。

  <nav>
    <ul  id="nav">
      <li id="abc"><a href="#">~~~~~</a>
      </li>
      <li><a href="#">~~~~~</a>
      </li>
      <li ><a href="#">~~~~~</a>
      </li>
      <li><a href="#">~~~~~</a>
      </li>
    </ul>
  </nav>

#nav {
	width: 100%;
	padding: 8px 24px;
	background: #fff;
	position: fixed;
	bottom: 0;
	z-index: 999;
	display: flex;
	justify-content: space-between;
	box-shadow:0 0 30px #ccc;

 li {
 	display:inline-block;
	padding-left:16px/327px*100%;
	 a{
 	font-size:14px/375px*100vw;
	font-weight:bold; 
	 }
 &:first-child {
	padding-left:0;
}
&:nth-child(2) {
	padding-left:56px/327px*100%;
}
 a {
 	color:#000;
 	text-decoration:none;
}
}
#abc a{ color: #cf9d35; }
}

Comments

[kei344]

具体的にHTMLおよびCSSを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

大きさがボックスの大きさなのか文字の大きさなのか分からないですが、文字は完全にaの中に納まっているのでとりあえずボックスのほうで。

liとaの間に隙間ができるという意味であれば、liにpadding: 0;を指定してみてください。
それでもダメならaがdisplay: block;か何かになっていてmarginが効いているのかもしれないので、aにmargin: 0;を指定してみてください。

Comments

[gin]

Sassの問題ではないのでコードはCSSにコンパイルしたほうがいいです。
またSassでもSCSSはインデント関係ないとはいえ直感的に分かるようにインデントはそろえたほうがいいです。

ひとまずコードの範囲を見た限りだとfont-sizeが原因のように感じます。
いったん「li」と「li a」に「font-size: 14px !important;」を指定して確認してみてください。
これで収まればここ以外のどこかにfont-sizeがあって継承されているのだと思います。

Answer 2

たぶんですが、
0. justify-content: space-between; があるから間隔が妙に開く
0. liに padding-left を指定している（これは想定している挙動でしょう）

ということだと思います。均等配置にしたければ flex のほうが簡単な気がします。

#nav {
    box-sizing: border-box; /* add */
    justify-content: space-between; /* delete? */
}

【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

Answer 3

ブラウザに何を使っているのか分かりませんが、IE なら F12 開発者ツール、Firefox なら firebug を使って html 要素にどのようにスタイルが適用されているか調べられるので、まずは問題の li 要素と a 要素に適用されているスタイルを見比べてください。

たぶん li 要素と a 要素で同じスタイルが適用されてないのだと思います。

F12 開発者ツール or firebug を見れば、どこでそのスタイルが定義されているかが分かるので、それを調べて修正すればよいと思います。