Question

这是一个最简单的html文档。我以margin-top样式指定h1。这是文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Free mind!</title>
    <style type="text/css">
      p {
        font-family : DejaVu Sans Mono;
        font-size : 12pt;
        line-height : 100%;
        margin-top : 0cm;
        margin-bottom : 0.3cm;
        white-space : pre-wrap;
        display : inline;
      }
      h1 {
        font-size : 14pt;
        line-height : 100%;
        margin-top : 1cm;
        display : inline;
        color : blue ; 
      }
    </style>
  </head>
  <body>
    <h1>Bio</h1>
      <p>
bk-simulates-range.py -S &quot;&quot; -b &quot;&quot; -e &quot;&quot; -s &quot;&quot; -t dspc.top -n 3000000 -c -j bk-runs-mpi.bash -w &quot;-4.5.5-double_gcc&quot; 2&amp;&gt; `date +%Y-%b-%d-%H%M%S`.log &amp; 
bk-pymol-selects.py -f confout.gro -s &quot;resi 1-128&quot; -t traj.trr -i 50 
bk-pymol-selects.py -f *ane.gro
bk-pymol-pic.py -f confout.gro -s &quot;resi 1-128&quot; -x &quot;-2&quot; -y &quot;-3&quot; -z &quot;0&quot; -t traj.trr
       </p>
     <h1>Bash</h1>
       <p>
cd /new/dir; (cd /old/dir; find -type d ! -name .) | xargs mkdir
for i in `ls`; do  $i; done
       </p>
  </body>
</html>

我这个问题必须非常简单。

修改：

所以问题是：

display : block;

h1规范中的

。我最终使用（这里我引用head和body - 其他部分不需要更改）：

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Free mind!</title>
    <style type="text/css">
      p {
        font-family : DejaVu Sans Mono;
        font-size : 12pt;
        line-height : 100%;
        margin-top : 0px;
        margin-bottom : 0px;
        white-space : pre-wrap;
        display : inline;
      }
        h1 {
        font-size : 14pt;
        line-height : 100%;
        margin-top : 20px;
        margin-bottom : -1px;
        display : block;
        color : blue ; 
      }
    </style>
  </head>
  <body>
    <h1>Bio</h1>
      <p>bk-simulates-range.py -S &quot;&quot; -b &quot;&quot; -e &quot;&quot; -s &quot;&quot; -t dspc.top -n 3000000 -c -j bk-runs-mpi.bash -w &quot;-4.5.5-double_gcc&quot; 2&amp;&gt; `date +%Y-%b-%d-%H%M%S`.log &amp; 
bk-pymol-selects.py -f confout.gro -s &quot;resi 1-128&quot; -t traj.trr -i 50 
bk-pymol-selects.py -f *ane.gro
bk-pymol-pic.py -f confout.gro -s &quot;resi 1-128&quot; -x &quot;-2&quot; -y &quot;-3&quot; -z &quot;0&quot; -t traj.trr</p>
     <h1>Bash</h1>
       <p>cd /new/dir; (cd /old/dir; find -type d ! -name .) | xargs mkdir
for i in `ls`; do  $i; done</p>
  </body>

也有人说应该使用em和px代替cm和pt - 对于cm和pt并不好为了网络。

Answer 1

h1 { 
    font-size : 14pt; 
    line-height : 100%; 
    margin-top : 1cm; 
    display : block;      /*changed*/
    color : blue ;  
}

Answer 2

你使你的h1元素内联并且保证金不会受到影响。

请注意，以cm和pt为单位的设置仅用于打印，而不是网络。

Answer 3

更改为使用：display : inline-block;

编辑：一些说明：

如果元素没有布局，则不支持边距。有三种不同的方法是使用display:block;，使用display: inline-block;或使用现有的display:inline;，然后在样式中添加新的zoom:1;。请注意，display:inline-block;可能并非在所有浏览器上完全支持，但所有现代浏览器都应该没问题。

Answer 4

您将h1和p元素显示为内联。边距更适合阻止元素。

如果您需要使用内联，请尝试使用h1上的填充而不是边距。

另外，您不应该使用单位pt和cm进行展示，您应该坚持使用px和em。

h1 {
    font-size : 14pt;
    padding-top : 1cm;
    display : inline;
    color : blue ; 
}

margin-top不起作用

4 个答案: