如何在Shopify HTML框中自定义Marquee HTML的Padding和Margin

首先，我先帮你梳理下现有代码里的几个小问题，这些可能也是导致你遇到样式问题的原因：

• 代码里有多余的</marquee style>标签，属于语法错误
• bgcolor="f4f0e7"缺少开头的#，应该是#f4f0e7
• 老旧的<font>标签可以用CSS样式替代，更灵活可控
• <ul>标签默认带有margin和padding，会干扰布局

针对你遇到的文本顶对齐和下方残留空白问题，我们可以通过内联CSS样式直接在代码里调整，因为Shopify的HTML框里没法用全局body样式，内联样式是最直接的方案。

修改后的完整代码 #

<marquee direction="right" scrollamount="1" bgcolor="#f4f0e7" onmouseover="this.stop();" onmouseout="this.start();" style="padding: 8px 0; margin: 0; display: block; line-height: 1.4;">
  <ul class="ticker-left" style="margin: 0; padding: 0; list-style: none;">
    <li style="font-size: 20px;">Pre-order AW '21 Collection now </li>
  </ul>
</marquee>

关键调整说明 #

• 解决文本顶对齐：给<marquee>添加了padding: 8px 0（上下内边距），同时设置line-height: 1.4让文本垂直居中；另外重置了<ul>的默认margin和padding，去掉了列表自带的间距。
• 消除下方空白：给<marquee>设置margin: 0和display: block，避免元素默认的外边距和行内元素特性带来的空白；同时确保<ul>和<li>都没有额外的底部外边距。
• 优化代码规范：把<font>标签替换成<li>上的font-size: 20px（对应原<font size="5">的大小），修复了bgcolor的语法错误，移除了多余的闭合标签。

如果调整后还有细微的间距问题，你可以微调padding的数值（比如改成10px 0），或者给<marquee>加上vertical-align: top来进一步对齐。

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