Suppression de la marge/du remplissage indésirable du contenu incorporé

J'ai intégré un widget SoundCloud sur ma page sous une image.Suppression de la marge/du remplissage indésirable du contenu incorporé

Il y a un petit espace entre le bas de l'image et le haut du widget. J'ai utilisé Web Inspector pour trouver d'où vient cet écart, mais je ne le trouve pas. Je voudrais supprimer cet espace.

Le code est assez simple:

<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Image-New_Delhi_Lotus.jpg"> 
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F66379982?"></iframe>

Voir le code en action: http://jsfiddle.net/LAn3A/

Je ne peux même pas dire si cet écart est dû à une bordure, un rembourrage ou une marge. Je suis certain que ça vient du widget SoundCloud.

Source

2012-11-30 Olly F

Les iframes incorporées n'affichent généralement pas de marge ou de marge. Ce peut être votre CSS qui ajoute la marge ou le remplissage. Regardez votre code dans ce site sandbox: http://jsbin.com/ulotun/1/edit il n'y a pas de marge autour du widget. – Mohsen

Il ya actuellement un espace autour du widget dans le code du site que vous venez de publier. Regardez de très près au-dessus du widget! http://i.imgur.com/jdyKf.png –

Donc, le rembourrage n'est pas autour de l'iframe – Mohsen

Cela peut se produire lorsque vous essayez de positionner étroitement un élément en ligne à côté d'un élément de niveau bloc. Les propriétés de texte telles que la hauteur de ligne sont gênantes. Corrigez-le en définissant l'image sur un élément de niveau de bloc:

img { display: block;}

Source

2012-11-30 17:51:30 KatieK

Merveilleux! Vous l'avez résolu. Pour les points bonus, pourriez-vous expliquer pourquoi cela se produit exactement? –

L'image est un élément en ligne, c'est-à-dire que vous pouvez l'imaginer comme une lettre ou un mot dans une ligne de texte. Il y a des propriétés CSS qui affectent les éléments en ligne, comme 'line-height',' vertical-align' (les deux étant définis sur les éléments parents) et la façon dont ils sont disposés. Dans ce cas, la hauteur de ligne par défaut définie sur l'élément parent affecte la ligne contenant l'image. –

Suppression de la marge/du remplissage indésirable du contenu incorporé

Répondre

Questions connexes