HTML/CSS 用图像为段落留白

Question

我想添加一些 margin/padding 但保留段落 nice/clean 和响应。

我尝试添加 margin: 10px 但它只适用于第一行

有没有一种方法可以在不影响响应能力的情况下调整上面的代码以获得一些 padding/margin。

请注意，由于客户端奇数限制，我不能在上面的代码中使用任何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

首先尝试将 div 的宽度从 100% 更改为 360px。此外，删除第一个 div 中的额外 div。如果这不起作用，则在 img.

之后插入第二个 div 到第一个 div 的跨度

Answer 2

您可以在图片标签中添加“display: block” 输出如下：

   <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>

HTML/CSS 用图像为段落留白

HTML/CSS Margin a paragraph with image

html

css

image

margin

padding