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:

简单数学：

2+2=4


数学难题：


3+3=6

结果:

---

你的利润被削减了。我已经把它们修好了

---

通常，您可以编写边距，例如：

margin:top-right-bottom-left

而不是其相关的

margin-*

属性-其中，top、right、bottom和left表示您可以根据需要提供的像素宽度值

我建议使用div并将类设置为'equality'，因为'equality'不是有效的html标记。例如

简单数学：
2+2=4
数学难题：
3+3=6

添加

显示：内联块到你的
方程
。那就解决了。i、 e

在css中：

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

Fiddle:
只是一个提示--您可以一次设置所有4个边距：
边距：Tpx Rpx Bpx Lpx
其中T、R、B、L是顶部、右侧、底部和左侧边距。填充也一样。
easy math:

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

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

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