web-dev-qa-db-fra.com

Rembourrage supplémentaire sur Chrome/Safari/Webkit - des idées?

Ma page comporte ce remplissage supplémentaire en haut de page que je ne parviens pas à supprimer. J'ai tout essayé sous le soleil et j'espère que quelqu'un pourra me montrer le chemin.

Des idées?

cssgoogle-chromesafaripadding
16
pepe

Votre page comporte un élément en haut avec une marge supérieure qui s'étend en dehors de votre wrapper. Si vous avez ceci:

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

Ensuite, l'élément .section sera placé en haut du .wrapper et sa marge de 40 pixels s'étendra vers le haut. Cela est dû à la manière dont les marges se réduisent afin que deux marges entre des éléments ne s’accumulent pas. Vous pouvez empêcher cela en ajoutant overflow: hidden sur le wrapper.

Dans votre balisage, c'est l'élément .mini-search qui a une marge supérieure de 40 pixels. Supprimez cette marge ou ajoutez overflow: hidden au groupe de champs qui la contient.

8
Andrew Vit

La feuille de styles WebKit contient les éléments suivants: Propriétés 'Margin' et '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:

Prendre plaisir

11
Filipp Yanukovich

Utilisez ce code css:

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

La question que vous commentez est due au style de l'agent utilisateur, j'apprends qu'il inspecte la balise body avec l'outil de navigation. Vous devez rechercher les styles d'élément sur un navigateur à l'aide des outils qu'il fournit (tous les éléments importants incluent désormais un inspecteur DOM) afin de pouvoir démystifier le comportement non standard. 

Je sais que vous ne le demandez pas, mais en parlant de WebKit, je colle un code pour obtenir les frontières arrondies sur tous les navigateurs sauf 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

j'espère que vous avez fait:

body {padding :0; margin:0}

par défaut, la balise body a un rembourrage.

3
WalterJ89

C'est , à mon avis, causé par un élément EMBED ajouté par un plugin juste après la balise d'ouverture HTML * (cochez la case "clic droit> inspecter l'élément" pour voir s'il est vraiment là). Si oui, il y a essentiellement deux options à suivre:

  1. désactive/supprime le plugin qui est responsable de l'ajout de l'élément ; (préféré, car c'est global)
  2. insérez embed{display:none} dans votre feuille de style.

* C'était mon cas - le plugin appelé default plugin et la désactivation et la suppression ont aidé à résoudre le problème.

1
Kaja

J'ai eu le même problème avec mon nav qui a un rembourrage et contient des boutons. Overflow:hidden a fonctionné, mais il a également coupé les boutons, car ils avaient un rembourrage qui franchissait la limite de la hauteur des navs. J'ai donc essayé overflow:visible et cela a bien fonctionné pour moi.

0
David Lux

Toujours inclure le fichier css de réinitialisation YUI. 

et: body, html {padding: 0; margin:0} c'est tout!

0
Omar Al-Ithawi

Cela fonctionne avec IE (au moins IE v10 dans mes tests):

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

Celui du bas est celui qui fonctionne pour IE 10, conserve simplement toutes les dimensions de ce que vous définissez un sélecteur/élément comme étant dans la largeur et/ou la hauteur.

0
Jeremy Smith

Je peux résoudre ce problème en supprimant la règle:

* { padding: 0 }

De votre CSS. Je ne suis pas sûr de ce qui se passe, mais c'est la cause.

0
Eric Wendelin