web-dev-qa-db-ja.com

Chrome / Safari / Webkitの追加のパディング-何かアイデアはありますか？

私のページでは、ページの上部に削除できない余分なパディングがあります。太陽の下ですべてを試し、誰かが私に道を示すことができることを願っています。

何か案は？

cssgoogle-chromesafaripadding
17
pepe

ページの上部に、ページラッパーの外側に広がる上部マージンを持つ要素があります。これがあれば：

<div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

次に、.section要素が.wrapperの上部に配置され、40ピクセルのマージンが上部からはみ出します。これは、要素間の2つのマージンが累積しないようにマージンが一緒に折りたたまれる方法に関係しています。これを防ぐには、ラッパーにoverflow: hiddenを追加します。

マークアップでは、40pxの上余白があるのは.mini-search要素です。このマージンを削除するか、マージンを含むフィールドセットにoverflow: hiddenを追加してください。

8
Andrew Vit

WebKitスタイルシートには、次のものが含まれています。「margin」および「padding」プロパティ：

-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:

-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:

楽しい

12
Filipp Yanukovich

このCSSコードを使用してください：

/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}

あなたがコメントする問題は、ユーザーエージェントスタイルのため、ブラウザーツールでbodyタグを検査する方法について学びます。非標準の動作をわかりやすく説明できるように、提供されているツールを使用してナビゲーターの要素スタイルを追跡する必要があります（現在、すべての重要事項にDOMインスペクターが含まれています）。

私はあなたがそれを求めないことを知っていますが、WebKitのことについて話しているので、IE以外のすべてのブラウザで丸い境界線を取得するためのコードを貼り付けます。

.rounded
{
-moz-border-radius:5px; /*works on Firefox */
-webkit-border-radius:5px; /*works on Safari and Google Chrome*/
border-bottom-radius: 5px; /*works on Opera*/
}
4
Horacio Nuñez

私はあなたがしたことを信じます：

body {padding :0; margin:0}

デフォルトでは、bodyタグにはパディングがあります。

3
WalterJ89

それは、私の意見では、原因HTML開始タグの直後にプラグインによって追加されたEMBED要素*（「右クリック>要素を検査」をチェックして、それかどうかを確認します本当にあります）。はいの場合、基本的には2つのオプションがあります。

  1. プラグインを無効/削除これは要素の追加を担当; （グローバルであるため、推奨）
  2. 挿入embed{display:none}をスタイルシートに追加します。

*これは私のケースでした-プラグインはdefault pluginと呼ばれ、無効化と削除の両方が問題の解決に役立ちました。

1
Kaja

パディングがあり、ボタンが含まれているナビゲーションでも同じ問題が発生しました。 Overflow:hiddenは機能しましたが、navsの高さの境界を横切るパディングがあったため、ボタンも切断されました。だから私はoverflow:visibleそしてそれは私にとってはうまくいきました。

0
David Lux

常にYUIリセットcssファイルを含めます。

および：body, html {padding: 0; margin:0} それでおしまい！

0
Omar Al-Ithawi

これはIE（少なくともIE v10）で動作します）：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

一番下のものは、IE 10で機能するものです。幅と高さのいずれかにセレクタ/要素を設定するために、すべての寸法を保持します。

0
Jeremy Smith

ルールを削除することで修正できます：

* { padding: 0 }

CSSから。何が壊れているのかはわかりませんが、それが原因です。

0
Eric Wendelin