Pourquoi ma marge supérieure ne fonctionne pas?

J'ai une liste d'images que je suis en train de bouger, mais il ne fonctionne pas.Pourquoi ma marge supérieure ne fonctionne pas?

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
     <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <h1>Portfolio</h1> 
      <img src="assets/img/PHOTOGRAOHY.png" alt="Photography" width="214" height="183"> 
      <img id="industrialDesignIMG" src="assets/img/ID.png" alt="Industrial Design" width="232" height="183"> 
      <img src="assets/img/GraphicDesign.png" alt="Graphic Design" width="233" height="196"> 
      <img src="assets/img/animation.png" alt="Animation" width="198" height="142"> 
     </div> 
    </body> 
</html>

CSS:

#industrialDesignIMG { 
    border:1px #fff solid; 
    display: inline-block; 
    margin-top: 80px; 
} 
#wrapper { 
    width:960px; 
    margin:0 auto; 
}

Je veux #industrialDesignIMG avoir un margin-top de 80px, mais rien ne bouge ou non tous les éléments img déplacer. Que puis-je faire pour que mon margin-top fonctionne?

Source

2012-10-08 Tsundoku

Les images sont des éléments en ligne. Pour résoudre ce flotteur chaque image à gauche, cela fera un élément de bloc:

http://jsbin.com/ekojux/1/

img { float: left }

Source

2012-10-08 18:12:50 jsweazy

Utilisation:

padding-top: 80px;

ou:

position: relative; 
bottom: -80px;

Source

2012-10-08 18:12:33 mreq

En fait, il est appliquée. C'est juste que puisque les images sont tous des éléments en ligne, ils sont en ligne les uns avec les autres, il semble donc qu'ils sont tous décalés de 80 pixels parce que les images sont alignées en bas.

Voir this JSFiddle without the top margin et this JSFiddle with the top margin.

Source

2012-10-08 18:12:40

Float toutes les images gauche.

img { 
    float: left; 
}

Source

2012-10-08 18:12:55 Catfish

Le positionnement par défaut de tout élément est statique. Par conséquent, l'ordre/le positionnement de tout élément variera en fonction de la position des éléments frères. Pour être simple, il suffit d'ajouter CSS float: left aux balises d'image et d'attribuer la marge pour votre image spécifique. Exemple:

#wrapper img { float: left; }

Ajoutez maintenant une marge à votre #industrialImg. Cela déplace votre en-tête au coin. Il suffit de l'envelopper tout le img avec une nouvelle div. Cela devrait fonctionner.

Source

2012-10-08 18:18:49 devsathish

Pourquoi ma marge supérieure ne fonctionne pas?

Répondre

Questions connexes