floatを使うとpaddingがおかしくなる？

CSSでfloatを使った要素ではpaddingがおかしくなっているように思われます。
以下のサンプルを試してみると分かると思いますが、文字列とそれを囲んでいる枠線との上下幅が明らかに異なっています。
なぜでしょうか？解決策はどうすれば良いでしょうか？

html
1<style type="text/css">
2#sample_test span{
3	border: solid white 1pt;
4	border-radius: 5px;
5	padding: 0px 3px;
6}
7</style>
8<ul id="sample_test">
9	<li>右寄せしてみます→<span style="float:right">文字列</span></li>
10	<li>普通でしてみます→<span class="sample">文字列</span></li>
11</ul>

追記
これがサンプル画像ですが

floatを使った時の上下のpaddingが明らかにちょっと広くなってしまっています

しかし、外部の無料でテストできるサイトで確認したところ画像のような違いは生まれませんでしたので、私が使っているサイト固有の原因が考えられます。引き続き考えてみます。

kei344

2018/10/05 20:54

https://jsfiddle.net/nh8dc1Lo/ 問題が再現しません。ほかのCSSが当たっていませんか？また、スクリーンショットを提示されてはいかがでしょう。

m.ts10806

2018/10/05 21:33

何のブラウザで確認したか他のブラウザではどうか、ブラウザデベロッパーツールで確認したりしてみてください。

infologicmation

2018/10/05 23:58 編集

chromeを使っていますが、chromeの問題ではなくて、使っているサイト(はてなブログ)に入っているデザイン(CSS)の問題でした。今度はこのCSSに対処する問題を私は考えてみます。

think49

2018/10/06 03:48

「現象を再現可能なコード」を質問文に追記して下さい。 https://ja.stackoverflow.com/help/mcve

行動規範の内容に同意します

回答1件

コードの方コピらせてもらってFirefox56で表示してみました。
テキストの高さが自分のと比べておかしかったのでもしやと思い、line-heightを弄ったら同様の結果になったのでそれがひょっとしたらサイト固有の設定になっているのかもしれません。

外部のサイトでやるのもいいですが、なるべく他の記述が無い綺麗な状態のHTMLファイル作っていくつかの環境(Chrome、Firefox、Edgeなど)で試すといいかもしれません。

結果は以下のような感じですが、Chromeではまたちょっと変わった結果になってしまいます。
ん～どうしたものか・・・。

HTML<!DOCTYPE
1<html>
2<head>
3<meta charset="UTF-8">
4<title></title>
5</head>
6<body style="background-color: black; color: white;">
7<style type="text/css">
8#sample_test span{
9    border: solid white 1pt;
10    border-radius: 5px;
11    padding: 0px 3px;
12}
13BODY{
14	line-height: 2em;
15}
16</style>
17<ul id="sample_test">
18    <li>右寄せしてみます→<span style="float:right;">文字列</span></li>
19    <li>普通でしてみます→<span class="sample">文字列</span></li>
20</ul>
21</body>
22</html>

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6</head>
7<body style="background-color: black; color: white;">
8<style type="text/css">
9#sample_test span{
10    border: solid white 1pt;
11    border-radius: 5px;
12    padding: 0px 3px;
13}
14/*BODY{
15	line-height: 2em;
16}*/
17</style>
18<ul id="sample_test">
19    <li>右寄せしてみます→<span style="float:right;">文字列</span></li>
20    <li>普通でしてみます→<span class="sample">文字列</span></li>
21</ul>
22</body>
23</html>

※久しぶりに触ったのでちょっとおかしいところあるかもしれません
#追記
yoshinaviさんの返信からブロック要素になるようにsampleクラスにinline-blockを指定すればスタイルの統一はできそうですね。
↓は質問者さんのサンプル画像となるべく近くなるように設定してみました。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6</head>
7<body style="background-color: black; color: white;">
8<style type="text/css">
9#sample_test span{
10    border: solid white 1pt;
11    border-radius: 5px;
12    padding: 0px 3px;
13}
14#sample_test li{
15	margin: 0.5em 0em;
16	line-height: 1.3em;
17}
18.sample {
19display: inline-block;
20}
21</style>
22<ul id="sample_test">
23    <li>右寄せしてみます→<span style="float:right;">文字列</span></li>
24    <li>普通でしてみます→<span class="sample">文字列</span></li>
25</ul>
26</body>
27</html>

Firefox56

Chrome69

Edge38

Opera56

投稿2018/10/05 22:17

編集2018/10/07 13:40

nekome4

総合スコア24

kei344

2018/10/05 22:28

https://jsfiddle.net/nh8dc1Lo/2/ 確かに再現しますね。多分下記仕様による表現の差が出るのだと思います。【float - CSS: カスケーディングスタイルシート | MDN】 https://developer.mozilla.org/ja/docs/Web/CSS/float > float は暗黙的にブロックレイアウトの使用を意味しており、 display の計算値を変えるケースがあります。【Visual formatting model details】 https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height > On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.). > > The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. (For more details, see CSS level 3.)

m.ts10806

2018/10/05 22:55

やはりここはCSSフレームワークを使おうということでは。ブラウザ間の違いを追い求めてると個人では余程精通していないと限界があります。

yoshinavi

2018/10/07 07:15

横からスミマセン。「kei344」さんの検証コードをみて思ったのですが、MDNの参照先にもあるように、「float」はブロック要素として高さ指定可能。「span」はインライン要素だから高さ指定不可。高さを指定するなら「display:inline-block;」または「display:block;」が必要との事ではないでしょうか？