html과 CSS가 내 방정식 주위에 수직 공간을 얻으려고합니다.

방금 방정식 주위에 수직 간격을두기 만하면됩니다. 방정식과 일정량 앞에 나타나는 일정량의 공간을 설정하고 싶습니다. 나는 모든 종류의 물건을 시험해보고 있지만 항상 미친 짓을하는 것처럼 보입니다. 여백 붕괴에 대해 이해하고 있지만 분명히 그 이상의 일입니다. 나는 바보 같은 짓을 설명하기 위해 어리석은 양의 공간을 두었습니다. 누구든지 도와 줄 수 있습니까?html과 CSS가 내 방정식 주위에 수직 공간을 얻으려고합니다.

calcStyle.css :

body {font-size:180%;} 
h2 {font-size:250%;} 
h1 {font-size:170%;} 
table {font-size:150%} 
body {margin-left:30px;} 
body {margin-right:30px;} 
body {background-color:#ffffff;} 
blockquote { 
    margin-left 55px; 
    margin-right 55px; 
    font-style: italic;} 
h1 {color:#222222;} 
td { 
    text-align: center; 
    padding-left: 12px; 
    padding-right: 12px; 
    padding-top: 4px; 
    padding-bottom: 4px; 
} 

th { 
    text-align: center; 
    padding-left: 12px; 
    padding-right: 12px; 
    padding-top: 4px; 
    padding-bottom: 4px; 
} 
equation { 
    margin-left:10px; 
    margin-right:10px; 
    padding-top:100px; 
    padding-bottom:100px; 
    padding-left:100px; 
    padding-right:100px; 
    margin-top:100px; 
    margin-bottom:100px; 
    border:50px #eeeeee; 
    background-color: #ddddaa 
}

HTML :

<head> 
    <link rel="stylesheet" type="text/css" href="calcStyle.css" /> 
</head> 
<body> 
    easy math: <br /> 

    <equation> 
     2+2=4 
    </equation> 
    <br /> 
    hard math: 
    <br /> 
    <equation> 
     3+3=6 
    </equation> 
    <br /><br /> 
</body>

결과 : enter image description here

출처

2011-12-25 William Jockusch

문제가 무엇입니까? – Blender

팁 - 한 번에 4 개의 여백을 모두 설정할 수 있습니다 : 'margin : Tpx Rpx Bpx Lpx' 여기서 T, R, B, L은 위쪽, 오른쪽, 아래쪽 및 왼쪽 여백입니다. 패딩과 동일합니다. –

당신은 떨어져 당신의 여백을 가지고있다. 나는 here을 고쳤다.

일반적으로 사용자의 필요에 따라 지정할 수있는 픽셀 너비 값을 위, 오른쪽, 아래쪽 및 왼쪽으로 나타내는 margin-* 속성보다 margin: top right bottom left 같은 여백을 쓸 수 있습니다.

출처

2011-12-25 04:25:44

'equation'이 유효한 HTML 태그가 아니기 때문에 div를 사용하고 클래스를 'equation'으로 설정하는 것이 좋습니다. 예 here

easy math: 

<div class="equation"> 
    2+2=4 
</div> 

hard math: 
<div class="equation"> 
    3+3=6 
</div>

출처

2011-12-25 04:35:01 flynfish

이 equation에 display: inline-block;을 추가합니다. 그것은 그것을 해결할 것입니다. 즉 당신의 CSS에서

equation { 
    ... 
    display: inline-block; 
    ... 
}

바이올린 : http://jsfiddle.net/VGwwL/

출처

2011-12-25 04:41:46 techfoobar

html과 CSS가 내 방정식 주위에 수직 공간을 얻으려고합니다.

답변

관련 문제