CODEWITHSUNDEEP
htmlcss
Foxtrot
Foxtrot

Reputation: 35

Padding bottom won't work

How do I make img to be floated on right side with bottom padding of 50px?

When I insert my code there is only white space of 50px at a bottom of image.

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

Upvotes: 1

Views: 313

Answers (3)

Kakada NEANG
Kakada NEANG

Reputation: 531

If you just want to align the image in the section, you can use the text-align.

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

Upvotes: 1

Johannes
Johannes

Reputation: 67748

Your CSS rule only applies when the image is inside a section element. Then it works as expected (I added a red border to demonstrate it):

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

Upvotes: 0

P.S.
P.S.

Reputation: 16384

You just forgot to include section element. In your CSS you applying styles to img inside section element, just add it to your html:

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

Upvotes: 1

Related Questions