web-dev-qa-db-ja.com

-webkit-marginはテキストに不要なマージンを追加します

これは今まで私を襲ったことはありませんでした（そしてこれはwebkitブラウザーだけでなく）。 pタグなどのすべてのテキスト、h1タグなど...テキストの上下に余分なスペースがあります。

chrome私はこれを見つけました：

ユーザーエージェントスタイルシート

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

これにより、一部の場所でアライメントが間違っています。そして、はい、リセットスタイルシートを使用しており、パディングやマージンは追加されていません。かなり基本的なセットアップ。これはなぜですか、どうすれば解決できますか？

csspadding
72
tbleckert

次のように、これらの属性を直接変更することもできます。

-webkit-margin-before:0em;
-webkit-margin-after:0em;

Chrome/Safariで動作します。お役に立てば幸いです！

47
JacobEvelyn

これらの-webkit-margin（s）はmargin: 0; padding: 0;によって上書きされます。それらを心配しないでください。

余分なスペース？ line-height:を設定したのでしょうか？

41
atlavis

同じ問題がありました。 Firefoxでは正しく表示されますが、Chromeでは表示されません。

http://meyerweb.com/eric/tools/css/reset/ を詳しく見て、スタイルシートでbodyタグの一般的な行の高さを宣言していないことがわかりました。 1.2に設定すると、両方のブラウザーで正しいレイアウトが再作成されます。

8
Edwin - EEDSGN

同じ問題がありました。メニューリンク間の余分なスペース。上記のソリューションはどれも機能しませんでした。私のために働いたのは負のマージンでした。このようなことをしてください：

margin: 0 -2px;

新しい編集：

これは-webkit-marginsとは関係ありません。ほとんどの場合、インライン要素で問題が発生します。これは、インライン要素間にスペースまたは改行があるために発生します。これを修正するには、多くのオプションがあります。

  • インライン要素間のすべてのスペースと改行を削除します
  • 要素の終了タグをスキップ-</li>（HTML5は気にしません）
  • 負のマージン（上記のように-IE6/7の問題-気にする人、アップグレードする;）
  • セットする font-size: 0;問題のあるインライン要素コンテナ（Androidおよびemsによるフォントサイズ変更の場合）に問題があります）
  • インラインをあきらめてフロートを使用します（この方法でtext-align：centerを失います）

CHRIS COYIERによるより具体的な説明と例

5
ruuter

タグ間の空白を削除するだけです。

<p id="one"></p>
<p id="two"></p>

になる：

<p id="one"></p><p id="two"></p>
5
Craig

私は<h3>タグで同じ問題を抱えていました。 margin:0;を設定しようとしましたが、うまくいきませんでした。

//を使用して、CSSの行を習慣的にコメントアウトしていることがわかりました。以前は何も問題を起こさなかったので、私は気づきませんでした。しかし、//を宣言する前に行で<h3>を使用すると、ブラウザーは宣言を完全にスキップしました。 //を/**/と交換すると、マージンを調整することができました。

この話の教訓：常に適切なコメント構文を使用してください！

1
story

私にとって、写真は次のとおりでした。

* {margin:0;padding:0;}

Firefox（FF）とGoogle Chromeはいずれも0.67emのマージンを設定します。FFはデフォルトのマージンを示しましたが、取り消し線を引いて適用しました。GCはデフォルトのマージンを示しました（-webkit-margin-before ...）交差していない。

応募しました

* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}

しかし、GCはデフォルトのマージンを超えていることを示していますが、役に立ちません。

私はどちらかを適用できることを知りました

line-height: 0;

または

font-size: 0;

望ましい効果を達成するため。これは、マージンが.67em-タイプであると仮定した場合に理にかなっています。誰かが説明をすることができたら、ブラウザが行の高さに依存する、削除できないマージンを適用することで私たちの生活を惨めにする理由は本当にありがたいです。

1
d_le_nen
    -webkit-margin-before: 0em;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0em;

私はこの正確な問題を抱えていたときにこれを解決しました。

0
andromedainiative

Chromeでは40pxでしたpadding-startこれが原因でした。私は働いた次のことをしました：

ul {
    -webkit-padding-start: 0em;
}
0
Gaui