html 和 css 试图在我的方程周围获得一些垂直空间

标签 html css padding margins

我想要做的就是在方程周围设置一些垂直间距。我想设置一定数量的空间出现在方程式之前和一定数量之后。我正在尝试各种各样的东西，但它似乎总是做一些疯狂的事情。我了解 margin 崩溃，但显然不止于此。我已经投入了一些荒谬的空间来说明古怪。谁能帮忙？

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