3

div やボタンなどを使ってテストしていたところ、フロートを削除すると自然なマージンが追加されることに気付きました。これを入力したら

body {
background: gray;
}

        button {
        font-size: 17px;
        color: white;
        margin-left: 0px;
        margin-right: 0px;
        border: 0;
        width: 100px;
        height: 40px;
        text-align: center;
        vertical-align: middle;
        background: rgba(0,0,0,0.0);
        transition: background 400ms;
        -webkit-transition: background 400ms;
        }

        button:hover {
        background: rgba(0,255,255,0.3);
        }

JSFiddle : http://jsfiddle.net/uBBeX/

(ボタン間の小さな余白を強調表示できます)

フロートを使用せずに「自然な」マージンを削除するにはどうすればよいですか?

注：ボタンの余白を削除したいだけで、他には何もありません。

4

3 に答える 3

2

フィドルの<button>要素は、少なくとも Chrome (私が現在使用している) ではデフォルトdisplay: inline-block;のスタイルを持っています。隣接するinline-block要素 (およびinline要素) は、要素間の空白をレンダリングできるようにします (ここでの空白は<button>s 間の改行です)。これは完全に正常であり、 inline-block 仕様に従っています。これは、またはによるものではありません。marginpadding

(この fiddleのように) 空白を削除すると、要素間の「自然な」(または「ゴースト」) 間隔が削除されることがわかります。このリンクで、このスペースを軽減するための他の手法を見つけることができます。

一部の手法では、コメントで空白をラップする必要があります。

<button>Text</button><!--
--><button>Text</button>

または>、終了タグと次の開始タグの間で終了を移動します。

<button>Text</button
><button>Text</button>

これらの手法は基本的に空白を削除するため、ブラウザーがレンダリングする空白はありません。

<li>のような一部の要素では<button>、これは有効なマークアップであり、ブラウザは要素間の空白をすべて無視するため、単純に終了タグを省略できます。

<li>Item text
<li>Next item

別の手法には、この fiddleに見られるように、 or要素font-size: 0を含む要素を設定することが含まれます。この手法では、実際にテキストを持つ子要素のフォント サイズを設定して、引き続き表示できるようにする必要があります。これは、サイズに基づいてフォントを台無しにする可能性もあるため、常に最適な解決策とは限りませんが、マークアップをいじることを伴わない優れた解決策です。inline-blockinlineem

さらに別の手法ではmargin、要素に負の側 (左または右) を設定する必要がありますが、これはマージンの意味的に不適切な使用法であり (実際には負にするべきではありません。ハッキーのようなものです)、マージン値の大きさは依存します。フォント サイズのレンダリングは、ブラウザーと OS によって異なる可能性があるため、この解決策は壊れる可能性が低く (小さなギャップを示したり、要素が重なったりする可能性があります)、私が提案するものではありません。

もちろん、別の解決策はfloatルールを守ることです:)。

于 2013-11-09T18:53:30.570 に答える
0

サイトの CSS リセット スクリプトを入手しましたか: http://www.cssreset.com/これにより、「自然な」マージンが 0 に設定され、おそらく問題が解決されます。

于 2013-11-09T18:38:27.537 に答える
0

と同じように

*
{
  margin:0px;
  pading:0px; //optional if you need
}

CSS レストを使用することも良いオプションです。

ここでは、最も使用されている css-reset http://meyerweb.com/eric/tools/css/reset/を見つけることができます。

于 2013-11-09T18:40:07.463 に答える