％

Question

在HTML代码的渲染中，如

>>> resolve_url('http://example.com/../thing///wrong/../multiple-slashes-yeah/.')
'http://example.com/thing///multiple-slashes-yeah/'

我想在标题之前比在标题之后有更多的垂直空间。原因：标题在语义上应该更多地属于第二段而不是第一段。当然，两个空间值都应该超过通常的行间距。确切的空间量和渲染方式（如果客户决定渲染垂直空间）应留给客户端（浏览器，盲文设备，打印机，语音引擎......）以创建令人愉快的输出。

我的机器到目前为止最好的尝试是

<p>Paragraph 1.</p>
<h3>Heading</h3>
<p>Paragraph 2.</p>

然而，我对硬编码确切的值感到不舒服，因为它可能与我的机器类似的设置看起来很好，但不是普遍的。有什么更好的建议与HTML和CSS？（如果可能的话，不要使用比HTML和CSS更多的东西：我希望我的页面能够为尽可能多的客户端理解。）

本质上，我希望有一个HTML + CSS解决方案，它对标题之前/之后的间距的影响大致与下面的伪代码相同：

<p style="margin-bottom:3ex">Paragraph 1.</p>
<h3>Heading</h3>
<p>Paragraph 2.</p>

Answer 1

https://jsfiddle.net/kqun2wbo/2/

CSS：

p {
  margin-bottom: 25px;
}
h3 {
  margin-bottom: 10px;
}

HTML：

<p>Paragraph 1.</p>
<h3>Heading</h3>
<p>Paragraph 2.</p>

％

https://jsfiddle.net/kqun2wbo/3/

Answer 2

更改标题css而非p标记。最初从内容页面或面板重置所有边距和填充，之后使用margin-bottom和margin-top足以实现此目的。

.container {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  padding:12px;
  width:80%;
  margin: 0 auto;
  
}

h3 {
  font-size:28px;
  margin-top:14px;
  margin-bottom:4px;
}

p {
  margin:0px;
}

<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<div class='container'>
  <hr>
  <p>Lorem ipsum dolor sit amet, pro brute altera vidisse ea, mea eu meis audiam efficiantur. Malorum volutpat ut est. Cu iuvaret ullamcorper duo, duo placerat salutandi ut. Sensibus democritum vis ex. Expetendis neglegentur voluptatibus ut sea, quo in vitae omnium, mel noster latine ei.</p>
  <h3>Being More Elegant</h3>
  <p>Timeam efficiendi ut vis, in iisque aeterno qui. Sea cu quando detraxit. Sit ut fastidii deleniti temporibus, eos et apeirian elaboraret. Ei per commodo habemus. Ad quo adipisci moderatius.</p>
</div>

如果您要求使用不同的浏览器和屏幕尺寸，可以使用media queries。

使用简单的媒体查询，您可以尝试以下代码块。

@media only screen /* Portrait IPhone 6+ */
and (min-device-width: 414px) and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
    h3 {
        font-size:28px;
        margin-top:14px;
        margin-bottom:4px;
    }
}

@media only screen /*Landscape IPhone 6+ */
and (min-device-width: 414px) and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
    h3 {
        font-size:22px;
        margin-top:7px;
        margin-bottom:2px;
    }
}

Answer 3

试试这个：

<p style="line-height:450%;">Paragraph 1.</p>
<h3>Heading</h3>
<p>Paragraph 2.</p>

https://jsfiddle.net/Lt50jysy/

在使用HTML和CSS进行标题后，标题大于空格之前的空格

3 个答案:

％