2017-07-24 5 views
1

Wie mache ich img auf der rechten Seite mit unteren Polsterung von 50px floated werden?Padding unten funktioniert nicht

Wenn ich meinen Code einfüge gibt es nur einen Leerraum von 50px am unteren Bildrand.

section img{ 
 
    float: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
}
<section> 
 
    <img src="if_60-rss_104443.png"> 
 
</section>

+0

Ihre 'img' nicht in einem' section' Tag enthalten ist, so dass der CSS-Selektor nicht übereinstimmt. – fubar

Antwort

1

Sie haben vergessen, nur section Element aufzunehmen. In Ihrem CSS Sie Stile img innerhalb section Element anwenden, fügen Sie ihn einfach auf Ihre html:

section img { 
 
    float: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
}
<section> 
 
    <img src="if_60-rss_104443.png"> 
 
</section>

0

Ihre CSS-Regel gilt nur, wenn das Bild in einem section Element ist. Dann funktioniert es wie erwartet (Ich habe einen roten Rahmen um es zu zeigen):

section img { 
 
    float: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
    border: 1px solid red; 
 
}
<section> 
 
    <img src="http://placehold.it/200x200/555"> 
 
</section>

1

Wenn Sie nur das Bild im Abschnitt ausrichten möchten, können Sie den Text-align verwenden.

section { 
 
    text-align: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
}
<section> 
 
    <img src="if_60-rss_104443.png"> 
 
</section>

Verwandte Themen