CODEWITHSUNDEEP
htmlcss
James L.
James L.

Reputation: 1153

can't style an image in css

I'm trying to change the margins of an image under a div "text" but it's not detecting any styling. I've no idea what I'm doing wrong. Please advice.

Here is the HTML

 <div class="text">
    <h2> <img src="/static/meddy1/images/ad.png" alt ="Ads"><a href="/docprofile/{{doc.id}}/">{{doc.name}}</a></h2>
    <h3 id="gray" style="margin-top: -10px;"> {{doc.clinic.address_normal}}</h3>
 </div>

here is the CSS

.text {
    margin-top: 0px;
    border: 1px solid;
    border-color: #C0C0C0;
    height: 150px;
    margin-left: 10px;
    text-indent: 10px;
}

.text > img {
    margin-top: 2px;
}

Upvotes: 0

Views: 1754

Answers (3)

Michael Aaron Safyan
Michael Aaron Safyan

Reputation: 95499

The problem is that ">" indicates a direct child, whereas your DOM shows that the image is actually a child of the h2 element beneath text. So, to fix it, you should use the descendant selector, instead:

.text img

In short "x > y" means select "y" with a direct parent of "x", while "x y" means select "y" if it has an ancestor (at any level) that matches "x".

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

.text > img is looking for a first-level child, but your image is a second-level child.

Try .text > h2 > img or .text img - note that the second one may cause issues if you have other images in your .text element.

Upvotes: 1

Drachenfels
Drachenfels

Reputation: 3286

Hi I am not css expert but .text > img means immediate child of .text, it's not the case. Your code is .text > h2 > img.

Upvotes: 1

Related Questions