Below is a code snippet that includes a tags, with one containing an image.
<div class="container">
<a href="#">Not styled</a>
<a href="#"><img src="image.png"></a>
</div>
If I specifically want to style the image only, how can I achieve this without creating a separate class or identifier?
For instance, if I wanted to style all the a tags, I would use CSS like this:
.container a {
/* styles here */
}
To style all the img tags, you could use something similar to:
.container img {
/* styles here */
}
Is there a way to extend this logic to an img within an a tag?
Edit: Here are the styles I am applying. For some reason, using .container a img results in extra padding/margins being added.
.container a {
padding: 9px 10px 5px 10px;
}
Edit 2: It seems the issue may lie elsewhere. When attempting any of the suggested solutions (such as .container a img, #img, src="image.png"), they all seem to increase the amount of vertical padding/margin. Should I remove my post? It appears to be receiving mainly downvotes at the moment.