如何仅在小屏幕显示两个空段落，为文本段落添双倍间距？

原代码问题分析 #

你当前写法里把.mobiles段落设为inline，但行内元素不支持垂直方向的margin/padding，而且两个行内空段落也没法产生垂直间距，所以只能得到单倍间距的效果。

方案一：修改现有空段落样式 #

把小屏幕下的.mobiles改成块级元素，同时调整间距：

/* 默认隐藏空段落，小屏幕再显示 */
p.mobiles {
  display: none;
}

/* 小屏幕（覆盖你原来的480px及481-767px区间） */
@media (max-width: 767px) {
  p.mobiles {
    display: block;
    /* 每个空段落设单倍间距，两个叠加就是双倍 */
    margin: 1em 0;
    /* 清除p标签默认样式干扰 */
    padding: 0;
    border: none;
  }
}

/* 大屏统一隐藏 */
@media (min-width: 768px) {
  p.mobiles {
    display: none;
  }
}

HTML保持不变：

<h1>Heading</h1>
<p class="mobiles">&nbsp;</p>
<p class="mobiles">&nbsp;</p>
<p>To display only on small screens</p>

方案二：更简洁的写法（推荐） #

不用额外空段落，直接给目标文本段落在小屏幕时加双倍上外边距：

/* 默认状态的间距（按需调整） */
.text-paragraph {
  margin-top: 1em;
}

/* 小屏幕设置双倍上间距 */
@media (max-width: 767px) {
  .text-paragraph {
    margin-top: 2em;
  }
}

/* 大屏恢复原有间距 */
@media (min-width: 768px) {
  .text-paragraph {
    margin-top: 1em;
  }
}

HTML简化为：

<h1>Heading</h1>
<p class="text-paragraph">To display only on small screens</p>

关键提醒 #

• 只有块级元素才能正常使用垂直方向的margin/padding，行内元素不支持
• 尽量避免用空标签控制间距，直接给目标元素加媒体查询样式更易维护

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