margin-top不起作用

这是最简单的html文档。我指定margin-top在h1风格。这里的文件：margin-top不起作用

<!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都没有好为网络。

来源

2012-01-12 Adobe

你能更具体地说明什么是错的吗？ – paulmorriss 2012-01-12 15:01:46

@paulmorriss：哦 - 对不起。上面的代码中'h1'的边距是错误的。它不是'1cm'，因为它必须符合规范。 – Adobe 2012-01-12 16:50:05

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

来源

2012-01-12 15:20:52

这里测试http://jsfiddle.net/EJdAV/ – 2012-01-12 15:25:07

你让你的h1元素内嵌，边距不会受到影响。

请注意，您在cm和pt中的设置用于打印，而不是网页。

来源

2012-01-12 15:23:07 Rob

改变用途：display : inline-block;

编辑：一些注意事项：

保证金将不无元素布局的支持。有三种不同的方法可以使用display:block;，使用display: inline-block;或使用现有的display:inline;，但随后在样式中添加新的zoom:1;。请注意，display:inline-block;可能并不完全支持所有浏览器，但所有现代应用都可以。

来源

2012-01-12 15:23:54

您在线显示h1和p元素。边距更适合阻挡元素。

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

此外，你不应该使用单位，pt和cm进行显示，你应该坚持与px和em。

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

来源

2012-01-12 15:24:30 daveyfaherty

margin-top不起作用

回答

相关问题