填充底部將不起作用

Question

如何使img浮動在右側，底部填充50px？

當我插入我的代碼時，圖像底部只有50px的空白區域。

section img{ 
 
    float: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
}

<section> 
 
    <img src="if_60-rss_104443.png"> 
 
</section>

Answer 1

你只是忘了包括section元素。在你的CSS，你將樣式應用於imgsection元素中，只需將其添加到您的HTML：當圖像是section元素中

section img { 
 
    float: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
}

<section> 
 
    <img src="if_60-rss_104443.png"> 
 
</section>

Answer 2

你的CSS規則只適用。然後，它按預期工作（我加了一個紅色邊框進行論證）：

section img { 
 
    float: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
    border: 1px solid red; 
 
}

<section> 
 
    <img src="http://placehold.it/200x200/555"> 
 
</section>

Answer 3

如果你只是要對齊的部分圖像，你可以使用文本對齊。

section { 
 
    text-align: right; 
 
    padding-right: 50px; 
 
    padding-bottom: 50px; 
 
}

<section> 
 
    <img src="if_60-rss_104443.png"> 
 
</section>