css Reset CSS

Eleven Up

Membre
Le saviez-vous ?

<body> même sans CSS possède une marge de quelques pixels ?
Je ne parvenais pas à colorer l'entièreté de ma page à cause d'une bande blanche qui courait tout autour du site...

En fait il faut faire une sorte de reset des marges de html et body
CSS
html, body {
    margin:0;
    padding:0;
}
Voir un reset total de tous les éléments
CSS
* {
    margin:0;
    padding:0;
}

Si ça peut aider certains.
(bien entendu vous pouvez appliquer des marges par la suite, l'un n'empêche pas l'autre, mais au moins vous savez que vous partez de zéro.
 

Nicolas

Membre
Salut 7UP,

Tu pars d'une feuille blanche ou bien tu modifies un site préconfiguré ?

En partant d'une page blanche avec Notepad++ par exemple, <html> et <body> ne devrait pas avoir de marge ou quoique ce soit d'autre. Par contre sur des CMS (Wordpress pour ne pas le citer) il y a probablement une stylisation de base sur les éléments de bases.
 

Hamza

Membre
Salut, je reviens sur cette histoire de reset des marges CSS car il semblerait que chaque navigateur utilise/décode les feuilles de styles de façon différente.

Et donc il existe bel et bien un reset CSS à effectuer sur sa propre feuille de style pour être certain que son code CSS sera bien décodé et s'affichera de la bonne façon sur tous les navigateurs.

Par contre la technique proposé par 7UP est plutôt déconseillée, et on recommande celle-ci, plus précise et qui n'applique pas un margin: 0; à tout et n'importe quoi.
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 

Eleven Up

Membre
Ah merci Hamza pour ces précisions, donc ça ne vient pas de l'éditeur mais du navigateur.
Je ne comprends pas pourquoi FF, Chrome, Edge et autres ne s'harmonisent pas sur ce genre de problème, cela éviterait les surprises.

C'est d'ailleurs étonnant qu'un même code CSS ne soit pas interprété de la même façon que vous naviguiez sur FireFox ou Chrome.
 

DaCode

Membre
Je ne comprends pas pourquoi FF, Chrome, Edge et autres ne s'harmonisent pas sur ce genre de problème, cela éviterait les surprises.
Il ne faut pas grand chose pour éviter les surprises et puis il n'y a plus grande différence entre les interprétations des navigateurs. Déjà Chrome est Edge sont basés tout deux sur Chromium donc c'est à peu près les mêmes fonctionnalités et FireFox franchement je vois rarement de différence.

Pour une approche plus technique il y a un site qui recense les compatibilité des fonctions CSS et HTML suivant le navigateur

Si vous développez vous connaissez surement ce site sinon mettez le en favori ! ⭐
 

Ces discussions pourraient vous intéresser...

Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question : Comment faire un effet de clic "genre physique" sur un bouton en CSS ? Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait...
Salut, Je suis en train de tester bootstrap sur mon localhost et j'ai un problème d'affichage. Je m'explique : Je veux afficher 4 colonnes qui contiennent chacune d'entre elles du texte mais j'ai beau chercher je ne comprends pas pourquoi elles s'affichent une au dessus des autres...
Hello tout le monde, J'ai découvert aujourd'hui sur le MarketPlace de Visual Studio Code l'extension Kite. (c'est une extension VSCode mais cela installe également le programme sur Windows). C'est une extension douée d'intelligence qui prédit ce que vous allez écrire et donc vous...
Haut