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?
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.
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
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*/
}
j'espère que vous avez fait:
body {padding :0; margin:0}
par défaut, la balise body a un rembourrage.
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:
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.
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.
Toujours inclure le fichier css de réinitialisation YUI.
et: body, html {padding: 0; margin:0}
c'est tout!
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.
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.