HTML：为什么文本比图像低一个段落？ （有图片）

Question

我遇到以下问题：

这是我当前得到的结果：

它是由以下HTML代码产生的：

.box-2 /*targeting class from HTML*/
    {
    	border:8px dotted #ccc;
    }

<!--Who we are-->
<div id="whoweare" align="center" class="box-2">
  <div align="center>	
    <font color="#534f4f" size="+1">	
      <h1 id="txt_whoweare_headline">Who we are</h1>
    </font>
  </div>
  <div style="padding-left: 15px; padding-right: 15px">	
    <table border="0">
      <tr> <!--tablerow-->
        <th width=400px>
          <div align="center">	
            <img 
              src="./img/me.png"
              width=60%>	
          </div>
        </th>	
        <td width=400px>
          <div align="justify">								
            <font color="#534f4f" size="+2" >	
              <h3>Julius Tolksdorf</h3>
              <div id="txt_whoweare_body1">CEO of innomotion media and head of software development.</div> 
              <div id="txt_whoweare_body2">
                He will be your primary contact during the planning and development processes.
                Julius has already finished about 20 apps, games & web pages and has years of experience being an Android & Unity developer.
              </div>
            </font>
          </div>
        </td>	
      </tr> <!--for padding-->
        <tr height=20px/>
      </tr>

    </table>
  </div>
</div>

您可能会看到，说“ JULIUS TOLKSDORF”的文本比左侧图像低1行。当然，我希望他们两个都从同一行开始。 CSS就是这样：

.box-2 /*targeting class from HTML*/
{
    border:8px dotted #ccc;
}

如果有人指导我解决上述问题，我将不胜感激。

谢谢：）

Answer 1

标题标签默认情况下有一个空白，因此您的<h3>也有这个空白。解决该问题的方法是，将顶部的margin设置为0。

此代码类似于：

h3 {
    margin-top: 0;
}

注意：这将删除页面中所有h3元素的上边距。

Answer 2

浏览器将用户代理样式添加到HTML标签。在这种情况下，if (sr.Contains(row["Keyword"].ToString()) == true) { e.Row.Cells[3].Text = e.Row.Cells[3].Text.Replace(row["Keyword"].ToString(), "<span style='background-color:yellow'>" + row["Keyword"].ToString() + "</span>"); } 添加了以下样式；

<h3>

如果设置了h3 { display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } ，它将使图像和h3 { margin: 0; }内联。

您在第二个div上也缺少结尾处“；因此，<h3> 应该是这个<div align="center>

Answer 3

默认情况下，文字“ JULIUS TOLKSDORF”实际上具有一定的边距，您需要在<h3>标签中将边距顶部设置为0

<h3 style="margin-top: 0;">Julius Tolksdorf</h3>