如何在 HTML 文档中插入垂直空格？

问题描述 投票：0回答：5

我正在用 HTML 编写一个测验，我想在问题之间插入一致的垂直空白（就像在 

LaTeX
中使用 vspace{3 cm}）。

例如：

<html>
  <body>
    <p>
     This is the first question?
      <!-- This is where I want about 3 cm of space -->
    </p>
    <p>
     This is the second question?
     <!-- This is where I want about 3 cm of space -->
    </p>
  </body>
</html>

是否有一种仅使用 HTML 和 CSS 来完成此操作的简单方法？

如何在 HTML 文档中插入垂直空格？

html css whitespace
5个回答
63
投票

阅读一些有关 CSS 的内容。很有趣：CSS：em、px、pt、cm、in...

<style>
  .bottom-three {
     margin-bottom: 3cm;
  }
</style>


<p class="bottom-three">
   This is the first question?
</p>
<p class="bottom-three">
   This is the second question?
</p>
29
投票

虽然前面的答案可能最适合这种情况，但如果您只想一次性完成并且不想费心修改其他文件，则可以内联 CSS。

<p style="margin-bottom:3cm;">This is the first question?</p>
20
投票

我总是用这个廉价的词来表示垂直空间。

    <p>Q1</p>
    <br>
    <p>Q2</p>
12
投票

这样写：

p {
    padding-bottom: 3cm;
}

或者

p {
    margin-bottom: 3cm;
}
0
投票

TLDR；使用 

text
，它必须是长度为 
x
的字符串数组。将 
{text}
插入 
hovertemplate
。

https://plotly.com/python/hover-text-and-formatting/有下一个MWE。

了解如何

text = ['Custom text {}'.format(i + 1) for i in range(5)]

使其长度为

x
。如果始终相同的文本，则使用：
text=["foo"] * 5
。

import plotly.graph_objects as go

fig = go.Figure(go.Scatter(
    x = [1,2,3,4,5],
    y = [2.02825,1.63728,6.83839,4.8485,4.73463],
    hovertemplate =
    '<i>Price</i>: $%{y:.2f}'+
    '<br><b>X</b>: %{x}<br>'+
    '<b>%{text}</b>',
    text = ['Custom text {}'.format(i + 1) for i in range(5)],
    showlegend = False))

fig.add_trace(go.Scatter(
    x = [1,2,3,4,5],
    y = [3.02825,2.63728,4.83839,3.8485,1.73463],
    hovertemplate = 'Price: %{y:$.2f}<extra></extra>',
    showlegend = False))

fig.update_layout(
    hoverlabel_align = 'right',
    title = "Set hover text with hovertemplate")

fig.show()
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.