如何使用HTML和CSS消除图片与<p>标签之间的间距

我来帮你搞定这个间距问题！看了你的代码，主要问题出在inline-block元素的垂直对齐方式以及图片的默认布局特性上，以下是具体的解决方案：

具体修改步骤 #

• 给.tooltip添加vertical-align: top;，让它和<p>标签顶部对齐，避免默认的baseline对齐带来的间距
• 给图片设置display: block;，消除图片作为inline元素时的默认行间距
• 修正HTML中未闭合的<p>标签，避免布局异常

修改后的完整代码 #

CSS部分 #

html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
header { position: relative; z-index: 1;}
#wrapper { height: 100%; width: 100%; top: 0; left: 0; position: absolute; z-index: -1; background: forestgreen; }
#content { box-sizing: border-box; position: absolute; padding: 0; margin-left: 0; margin-right: 0; text-align:center; overflow: auto; left: 0; right: 0; top: 70px; width: 100%; font-size: 25px; }
p { font-size: 20px; }
body { text-align: center; }
div.box { margin: 0 auto; font-size: 0; width: 875px; --R:175px; /* radius */ --m:5px; /* margin */ --t:50px; /* distance from top */ }
div.box p { width: 50%; margin:0; padding:0 var(--m); display: inline-block; vertical-align:top; text-align: justify; }
div.box p:before { content: ""; width: var(--R); height: calc(2*var(--R)); margin-top:var(--t); shape-outside: circle(var(--R) at var(--d,right) calc(-1*var(--m)) top calc(50% + var(--t)/2)); float: right; margin-right:calc(-1*var(--m)); }
div.box p:last-child:before { float: left; padding:0 0; --d:left; background-position:right; margin-left:calc(-1*var(--m)); margin-right:0; }
*,*::before,*::after { box-sizing:border-box; }
.tooltip { 
  position: relative; 
  display: inline-block; 
  margin-top:50px; 
  text-align: center; 
  vertical-align: top; /* 添加这行，和p标签顶部对齐 */
}
.tooltip img {
  display: block; /* 添加这行，消除图片的默认行间距 */
}
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; z-index: 1; margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size:20px; }
.tooltip:hover .tooltiptext { visibility: visible; }

HTML部分 #

<div id="wrapper">
 <div id="content">
 <br><br>
 <div class="box">
 <span class="tooltiptext">Tooltip text</span>
 <p>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 <br><br>
 </p>
 <div class="tooltip">
 <img src="https://jakuwegiel.web.app/assets/images/DSC_0925a-1.png" width="350px" height="350px">
 <span class="tooltiptext">My beautiful face</span>
 </div>
 <div class="tooltip">
 <img src="https://jakuwegiel.web.app/assets/images/cards.png" width="350px" height="350px">
 </div>
 <p>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </p>
 <br><br><br>
 Programming is my hobby and <b>I love it</b>! :)
 <br><br>
 </div>
 </div>
</div>

为什么这样修改？ #

• vertical-align: top;：inline-block元素默认的垂直对齐方式是baseline，这会导致元素底部出现额外的间距，设置为top可以让所有inline-block元素（<p>和.tooltip）顶部对齐，消除不必要的间距。
• img { display: block; }：图片默认是inline元素，会受到行高的影响，底部会有一小段间距，设置为block可以彻底消除这个问题。
• 修正未闭合的<p>标签：未闭合的标签可能会导致浏览器渲染异常，间接影响布局间距。

内容的提问来源于stack exchange，提问作者user14939932