padding divs with images by css selection

Question

my html code looks like that

<div class="div1">
    <span class="sp1"></span>
    <span class="sp2"></span>
    <img class="img1" src="sss.png">
    <a class="a1" href="test.aspx">aaaa</a>
    </img>
</div>

the code contains also few more boxes just without the image, does css can padding the boxes which contains an img tag

like in this css

.div1 > img {
    padding: 1px 0px 5px 0 !important;
    margin: 0;
}

but this css padd the image , and i want to padding the div

can you provide detailed code preferably in jsfiddle so that it helps to understand what do you want to achieve? — Sahil Jariwala, Dec 23 '13 at 08:32

Sid M · Answer 1 · 2013-12-23T08:43:29.873

1

you can give a common class name to all the div containing images and pad the div by taking only .imageContainer class

like this

.imageContainer{
    padding: 1px 0px 5px 0;
    margin: 0;
}

edited Dec 23 '13 at 08:43

answered Dec 23 '13 at 08:34

Sid M

4,268
4
27
47

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

I do not believe this is possible with CSS2/3 only CSS4, i.e. it has to be done through Javascript. See Is there a CSS parent selector?

edited May 23 '17 at 12:01

Community

1
1

answered Dec 23 '13 at 08:34

Jonas

6,641
8
29
50

i dont need the parent ,i need the self element that fit the selector – roy.d Dec 23 '13 at 08:40
You could give each div an additional class to indicate whether or not they include an img tag. Then the new class just need to do the padding. – Jonas Dec 23 '13 at 08:43

score 0 · Answer 3 · answered Dec 23 '13 at 09:01

Hello

I am not sure what you asked exactly. If you asked: Can I put "padding" to the img-tag directly - No. If you meant: Can I put padding to the div-tag, so that the image will not glue at the left side of the div, but has some space between the "border" of the div and the image - Yes.

1) All the content of div1 "should have the padding": You can write the padding-property into the class of the div:

css:

.div1{
      background-color:cyan;
      padding:5px;
}

hmtl:

<div class="div1">
    <span class="sp1">some text</span>
    <img class="img1" src="./DSCF1556.png">
    <a class="a1" href="test.aspx">aaaa</a>
    </img>
</div>

If you use the above, the image and text will be 5px away from the left side and top of the div.

2) Only the image "should have the padding", included to new line: If you just want to have the image to have this space, you can put a div around the image-tag. As it is a div a the image will be shown in a new line.

css:

 .padd{
            background-color:cyan;
            padding:5px;
        }

html:

<div class="div1">
    <span class="sp1">some text</span>
    <div class="padd">
        <img class="img1" src="./DSCF1556.png">
    <a class="a1" href="test.aspx">aaaa</a>
    </img>
    </div>
</div>

In that example only the image is displayed 5px from left and top.

3) Only the image "should have the padding", no new line: If you want to have the image on the same line then the text, then put a around the image-tag and add a class to the span-tag.

Hope this helps. Meru

No, because it has not linked the class padd to it. Try it. You only need to include the code I posted into a html-file. — Meru, Dec 23 '13 at 13:13

score 0 · Answer 4 · answered Dec 23 '13 at 10:17

0

If I understand correctly your question, you want the image to have "spacing" top and bottom when is present.

Does not margin solve your problem??

.div1 img{
    margin: 10px 0 5px 0;
}

When the image is not present there won't be no margin.

answered Dec 23 '13 at 10:17

rafakol

101
8

padding divs with images by css selection

4 Answers4