在html链接和徽标之间添加空格

Question

我正在尝试在图像徽标和链接之间添加空格。 不知道该怎么办 。 我尝试在文本中添加空格但没有工作（＆gt; FAA / ATC NEXT DAY PLAN） 我是后端人，但有时需要弄乱前端:(

<tr> <td> <img src="images/page_white_acrobat_small.png" align="absbottom" /> <a style="font-size: 12px" href = ""onclick="Popup.open({url:'PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a></td></tr>

Answer 1

源代码中的空格被截断。而是在图像或链接上使用边距。

E.g。

img {
  margin-right: 2em
}

Answer 2

你需要在这里给出一些余量以在图像和链接之间留出空间，你可以margin-left给a

td a{
  margin-left: 1px;
}

或margin-right至img

td img{
  margin-right: 1px;
}

Answer 3

你有几种方法可以做到这一点：

更好的解决方案是css，你可以做到：

td img{
  margin-right: 10px;
}

但如果您这样做，则会影响您网页的所有td img。 在这种情况下，我建议你在你的td上放一个课只影响这个元素，如果你有这种文件的列表，它会更好。

<tr class="fileMoreIcon"> 
<td> 
<img src="images/page_white_acrobat_small.png" align="absbottom" /> 
&nbsp;
<a ...........

和css

.fileMoreIcon img{
   margin-right: 10px;
}

另一种方法是添加一个html空格字符 

<tr> 
<td> 
<img src="images/page_white_acrobat_small.png" align="absbottom" /> 
&nbsp;
<a style="font-size: 12px" href = ""onclick="Popup.open({url:PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a>
</td>
</tr>

Answer 4

不幸/幸运的是，正如您现在意识到的那样，HTML布局中不会存在多个空格。

在格式化方面，CSS是你的朋友。您可以将此规则添加到样式表

tr td img {
  margin-right: 1rem;
}

否则，如果您没有样式表，请尝试在图片代码中添加内嵌样式，如下所示，

<tr> 
  <td> 
    <img src="images/page_white_acrobat_small.png" style="margin-right: 1rem;" align="absbottom" />
    <a style="font-size: 12px" href = ""onclick="Popup.open({url:PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a>
  </td>
</tr>

请注意，我已在您的代码中添加了style="margin-right: 1rem"。这会将此CSS规则直接应用于该标记，在右侧添加一个大小为1 rem的边距。