Question

我试图在此链接顶部栏中增加图像和文本之间的空间。

链接：https://pushdaddy2.myshopify.com/

我尝试了 ，这通常用于增加空格，但它只打印 字符。

  <span id="pab_message" style="color:inherit;">&amp;nbsp;&amp;nbsp;All t-shirts are 15% off </span>

任何人都可以说有使用 的条件吗？

以下是完整的html：

<div id="pab_bar" style="text-align: center; margin: 0px; padding: 4px 10px;
    left: 0px; height: auto; width: 100%; box-sizing: border-box; border: none; 
    background-color: rgb(34, 34, 34); color: rgb(255, 246, 169); font-size: 20px; 
    line-height: 25px; font-family: Sacramento;">
    <div id="pab_content" style="text-align:center; display: inline-block;">
        <img src="https://img.pngio.com/truck-icon-myiconfinder-png-of-transportation-vehicles-256_256.png" 
            width="30" style="vertical-align:middle">
        <span id="pab_message" style="color:inherit;">All t-shirts are 15% off </span>
        <img src="" width="30" style="vertical-align:middle">    
        <span style="display:inline-block;">
            <a id="pab_button" style="outline: none; border: none; line-height: 2em; 
                padding: 0px 1em; margin: 0px 0px 0px 1em; display: inline-block; 
                border-radius: 0.25em; cursor: pointer; width: auto;
                height: inherit; font-family: inherit; font-size: 0.875em; 
                text-align: center; text-decoration: none; 
                -webkit-appearance: none; color: rgb(255, 246, 169); 
                background-color: rgb(0, 0, 0);" type="button" href="#" 
                onclick="pab_button_on_click(event)">Check the product</a>
        </span>
    </div>
</div>

Answer 1

“我尝试了 ，这通常用于增加空格，但它只会打印 字符。”

不，不是，这就是padding的目的。

#pab_message {
  padding-left: 2rem;
}

<div id="pab_bar" style="text-align: center; margin: 0px; padding: 4px 10px; left: 0px; height: auto; width: 100%; box-sizing: border-box; border: none; background-color: rgb(34, 34, 34); color: rgb(255, 246, 169); font-size: 20px; line-height: 25px; font-family: Sacramento;">
  <div id="pab_content" style="text-align:center; display: inline-block;"><img src="https://img.pngio.com/truck-icon-myiconfinder-png-of-transportation-vehicles-256_256.png" width="30" style="vertical-align:middle"> <span id="pab_message" style="color:inherit;">All t-shirts are 15% off </span><img src="" width="30" style="vertical-align:middle">    <span style="display:inline-block;"><a id="pab_button" style="outline: none; border: none; line-height: 2em; padding: 0px 1em; margin: 0px 0px 0px 1em; display: inline-block; border-radius: 0.25em; cursor: pointer; width: auto; height: inherit; font-family: inherit; font-size: 0.875em; text-align: center; text-decoration: none; -webkit-appearance: none; color: rgb(255, 246, 169); background-color: rgb(0, 0, 0);" type="button" href="#" onclick="pab_button_on_click(event)">Check the product</a></span></div>
</div>

Answer 2

继续 @Paulie_D 的答案。还有你的评论。如果要使用手动空格，只需将内联间距与不同的填充值一起使用。

  <span id="pab_message" style="color:inherit; padding-left: 10px;">All t-shirts are 15% off </span>

  <span id="pab_message" style="color:inherit; padding-left: 15px;">All t-shirts are 15% off </span>

  <span id="pab_message" style="color:inherit; padding-left:20px;">All t-shirts are 15% off </span>

并回答您为什么不无空格在句子开头不起作用的问题，您可以查看：

https://stackoverflow.com/a/12279649/9357872

或从https://www.w3schools.com/html/html_entities.asp阅读：

不间断空间

HTML中使用的常见字符实体是不间断空格：

不间断空格是不会换行的空格。

两个单词之间用不间断的空格分隔在一起（不会   换行）。这在打断单词可能会很方便   破坏性的。

示例：
§ 10
10 km/h
10 PM
不间断空格的另一个常用用法是防止浏览器   截断HTML页面中的空格。

如果在文本中写10个空格，浏览器将删除9个空格   他们。要在文本中添加实际空格，您可以使用   角色实体。

＆nbsp;忽略空格而不起作用

2 个答案: