Lorsque nous utilisons à l'intérieur
text manned textile textile textile text mannequin texte Comment pouvons-nous avoir la même marge à droite et bas de l'image?
8 Réponses :
Une solution doit être la suivante:
<style>
img{
float: left;
margin: 0 20px 20px 0;
background-color: #CCC;
}
p{
margin: 0px;
}
div.clearer{
clear: left;
}
#container{
width: 300px;
border: 1px solid #CCC;
}
</style>
<div id="container">
<img height="100" width="100" />
<p>dummy text dummy text dummy text dummy text</p>
<div class="clearer"></div>
</div>
<p>here some text</p>
"Clear:" Effacer uniquement la flottante gauche, "Clear: les deux" efface à la fois la gauche et la gauche flottante; C'est une bonne pratique d'utiliser la directive appropriée. Le navigateur n'a donc pas à exécuter plus de chèques que nécessaire! C'est une question de redondance de code!
jettes un coup d'oeil à. J'ai ajouté exemple
Peut-être:
<style>
p img {
margin: 0px;
}
</style>
-1: Vous n'avez probablement pas vérifié sa page. Parce que son image a déjà 0 margins.
Votre image semble dépasser le réglage de la hauteur de ligne de 5px exactement. C'est pourquoi vous obtenez cet espace excédentaire.
Vous pouvez essayer Vous pouvez toutefois envelopper vos images dans des divs de conteneur qui auraient une hauteur multiple exacte de la hauteur de la ligne. Et également définir Conteneur Div
Overflow: caché; sur eux aussi. Mais je vous suggère de définir Taille de la police et hauteur de ligne à points (PT), pour contrôler leurs valeurs.
D'accord, après avoir consulté la page, ce n'est pas un problème de marge, mais le fait que votre police n'a pas d'espace pour être incluse à la ligne suivante.
Essayez de changer la taille de la police et vous verrez que cette marge est parfois réduite, parfois augmente.
OK, quelle que soit la taille de la police que vous utiliserez, ce sera toujours un problème de rendu des polices que votre navigateur devra faire face. Si le bas de l'image prend 3 pixels nécessaires pour afficher la police sur le même alignement, le navigateur devra «sauter» à la ligne de texte suivante. Encore une fois, ce n'est pas un problème de marge. Vous ne pouvez pas simplement éviter ce problème, car il s'agit des utilisateurs des polices.
Propriété d'utilisation alignement vertical: fond; à l'image, alors l'espace supplémentaire de bas sera supprimé.
de: http://bytes.com/ Topic / HTML-CSS / Réponses / 789019-IMG-Bottom-Margin-Mystery
C'est parce que les IMG sont affichés: en ligne, ils sont donc assis sur la base comme du texte, avec un peu d'espace en dessous d'eux pour des descendants.
Créez l'affichage IMG: Bloc.
C'est parce que c'est certainement un contenu en ligne. Si vous souhaitez conserver le contenu en ligne, mais supprimez l'espacement, il suffit d'ajouter:
line-height: 0;
J'ai aussi eu ce problème et je l'ai résolu en mettant le Voici un exemple jsfiddle.net . -tag dans un
, avec le
la hauteur de ligne < / Code> Propriété définie sur 0 .
Notez comment il n'y a pas d'espace entre l'image et le
ci-dessous.
0 commentaires
Pouvez-vous réparer le lien vers l'image? Merci.