HTML/CSS 用圖像為段落添加邊距

Question

我想添加一些邊距/填充，但要保持段落漂亮/干凈且響應迅速。

我嘗試添加margin: 10px但它僅適用於第一行

有沒有辦法在不影響響應能力的情況下調整上面的代碼以獲得一些填充/邊距。

請注意，由於客戶的奇怪限制，我不能在上面的代碼中使用任何 JQUERY/Javascript。

 <table> <tbody> <tr> <td> <div style="width:100%;height:auto;"> <div> <img src="https://i.imgur.com/ieffVLU.png" width="360px" style="float:left;border: 1px solid black"> </div> <div> <h5 style="text-align: justify;"> <span style="font-weight: normal;"> a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something </span> </h5> </div> </div> </td> </tr> </tbody> </table>

Answer 1

您可以將“顯示：塊”添加到您的圖像標簽，輸出將如下所示：

 <table> <tbody> <tr> <td> <div style="width:100%;height:auto;"> <div> <img src="https://i.imgur.com/ieffVLU.png" width="360px" style="float:left;border: 1px solid black; display:block"> </div> <div> <h5 style="text-align: justify;"> <span style="font-weight: normal;"> a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something a nice paragraph about something </span> </h5> </div> </div> </td> </tr> </tbody> </table>

Answer 2

嘗試將第一個 div 的寬度從 100% 更改為 360px。 此外，刪除第一個 div 中的額外 div。 如果這不起作用，則在 img 之后將第二個 div 的跨度插入到第一個 div。