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不起作用

回答

相關問題