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

问题描述：

我试图在图片徽标和链接之间添加一个空格。不知道该怎么做。我试着在文本中添加空间，但没有工作（> FAA/ATC NEXT DAY PLAN）我后台的人，但有时需要惹前端:(在html链接和徽标之间添加一个空格

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

使用而不是空格 –

@yogendarji余量可能是一个更好，更清洁和更普遍的解决方案。 – Trent

答

不幸/幸运的，因为你现在已经意识到，多个空格不会保留在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的边距。

它工作只是改变了1 rem到0.2 rem –

什么是rem？ ..如果我将图像右移一点 –

太棒了！查看任何在线文档以获取有关“rem”的解释。您当然可以用百分比或px值替换它。 – Trent

答

白在源代码中的空间将被截断，而是使用保证金的图片或链接。

如

img { 
    margin-right: 2em 
}

答

你需要GI VE这里一定的余量给图像和链接之间的空间，你可以给margin-left到a

td a{ 
    margin-left: 1px; 
}

或margin-right到img

td img{ 
    margin-right: 1px; 
}

答

你有几夭的方式来做到这一点：

的更好的解决办法是通过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>

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

相关推荐