web-dev-qa-db-fra.com

CSS - Comment supprimer la marge indésirable entre les éléments?

Cela semble être un problème courant, mais aucune des solutions que j'ai trouvées n'a fonctionné pour moi.

HTML

<html>
    <head>
        <link rel="stylesheet" href="c/lasrs.css" type="text/css" />
    </head>
    <body>
        <div class="header">
            <img src="i/header1.png">
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. 
               Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
               massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, 
               bibendum at, posuere sit amet, nibh.</p>
        </div>
    </body>
</html>

CSS

body {
    min-width: 950px;
    background-color: #FFFFFF;
    color: #333333;
}

.header {
    width: 950px;
    height: 171px;
    margin: 0px auto;
    padding: 0px;
    background-color: #CCCCCC;
    position: relative;
}

.content {
    width: 950px;
    margin: 0px auto;
    padding: 0px;
    background-color: #E3EEF9;
    position: relative;
}

J'ai délibérément cassé le chemin de l'image et défini une couleur d'arrière-plan pour le .header div pour que je puisse voir s'ils se touchaient. Voici à quoi ressemble ma page:

page example

Comme vous pouvez le voir, j'ai essayé de définir le remplissage et les marges des deux divs sur 0.

Pourquoi y a-t-il encore un écart?

htmlcssmargin
17
user2638233

Cela est dû aux éléments suivants:

Les navigateurs ajoutent automatiquement de l'espace (marge) avant et après chaque <p> élément. Les marges peuvent être modifiées avec CSS (avec les propriétés de marge).

Alors essayez:

p {
     margin: 0px;
}

Remarque: les navigateurs ajoutent également un style par défaut à d'autres éléments ! Cela peut être à la fois utile et ennuyeux dans différentes situations. Il y a trois façons de procéder:

  1. Supprimez complètement tous les styles par défaut que les navigateurs peuvent avoir . Ceci est accompli en utilisant un Réinitialiser la feuille de style. La plus populaire est Réinitialisation CSS d'Eric Meyer . Si vous voulez tout faire et avoir un démarrage complètement propre dans n'importe quel navigateur, utilisez la technique de Meyer. Cette méthode est préférable à l'utilisation de la méthode lente *{ margin:0; padding:0; } réinitialiser l'approche ( lire ici pourquoi )

  2. Normalisez la feuille de style à vos propres valeurs par défaut . Un grand ennui des webdesigners est que différents navigateurs utilisent différents styles par défaut. Cependant, un réinitialisation complète s'accompagne du problème fastidieux de redéfinir les styles de tous les éléments. Par conséquent, vous pouvez normaliser tous les styles par défaut des navigateurs en utilisant un ensemble prédéfini de styles par défaut cohérents et sensés. L'approche courante consiste à utiliser normalize.css pour cela ( Twitter, Github et SoundCloud utilisez ceci!)

  3. Ajustez les valeurs par défaut si nécessaire ou contournez consciemment les valeurs par défaut . La façon la plus courante (sans dire que c'est la meilleure) de travailler avec les valeurs par défaut est de savoir elles existent et de les ajuster si nécessaire. Les styles par défaut sont là pour une raison: ils peuvent aider les développeurs à obtenir rapidement l'apparence qu'ils recherchent. Le look est-il légèrement décalé? Ajustez simplement les styles en conséquence. Cependant, assurez-vous d'utiliser les balises correctes pour les éléments corrects. Par exemple, au lieu de supprimer le <p> marges pour textes en ligne , vous devez utiliser le <span> tag (pas de valeur par défaut margin)

Cela devrait vous aider à comprendre ce qui se passe dans les coulisses.

19
Jean-Paul

Vos marges dans les paragraphes débordent de la div (c'est normal), vous pouvez soit définir

p {
   margin: 0;
}

ou appliquez un débordement caché à vos divs

div {
  overflow: hidden;
}
6
Fly1nP4nda

utilisation

*{
    padding:0;
    margin:0;
}

dans ton style

4
Roy Sonasish

Les deux divs se touchent. La marge/remplissage des DIVs est toujours 0 par défaut, donc vos modifications n'ont aucun effet. Le <p> a cependant une marge, et comme il est imbriqué dans le div, il semble que le div ait un remplissage.

p {
    margin: 0;
}

va résoudre ce problème.

0
UweB

Essayez d'utiliser des css de réinitialisation, car tous les navigateurs sont livrés avec des marges de liens de style par défaut, des rembourrages, des hauteurs de ligne, des styles de police et vous devez commencer à partir d'éléments sans style.

Je recommande d'utiliser Eric Meyer reset CSS ( http://meyerweb.com/eric/tools/css/reset/ )

0
mironcatalin

essaye ça:

http://jsfiddle.net/JKS3k/3/

CSS

p{
   margin:0;           
}

OR

* {
margin:0;
padding:0;
}
0
Falguni Panchal

Ajoutez ceci:

*{
    margin: 0;
    padding: 0;
}
0
Michael Unterthurner