margin-top이 작동하지 않습니다.

다음은 가장 간단한 html 문서입니다. h1 스타일로 margin-top을 지정합니다. 문서는 다음과 같습니다.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>

저는이 질문에 매우 간단해야합니다.

편집 :

그래서 문제가 있었다 다음 h1 사양

display : block;

. 내가 사용하여 종료 (여기에 내가 head 인용과 body - 다른 부분은 변경이 필요하지 않습니다) : - cm과 pt 좋은 없습니다

<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 사용해야합니다 말을 웹용.

출처

2012-01-12 Adobe

무엇이 잘못 되었나요? – paulmorriss

@paulmorriss : 오 - 미안 해요. 위 코드의 'h1'의 여백은 잘못되었습니다. 그것은 사양에 따라야하므로 '1cm'이 아닙니다. 여기 – Adobe

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/ –

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이 작동하지 않습니다.

답변

관련 문제