HTML/CSS 用图像为段落添加边距

Question

I want to add some margin/padding but keep the paragraph nice/clean and responsive.

I tried adding margin: 10px but it only applies to the first line

Is there a way to tune up the code above to have some padding/margin without compromising responsiveness.

Please be advised that I cannot use any JQUERY/Javascript in the code above due to clients odd restrictions.

 <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

you can add "display: block" to your image tag and the output would be like:

 <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

Try to change first div's width from 100% to 360px. Also, remove the extra div that came inside the first div. And if this not works, then insert span of second div to first div after the img.