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

【问题标题】：html and css trying to get some vertical space around my equationshtml 和 css 试图在我的方程周围获得一些垂直空间
【发布时间】：2011-12-25 12:41:46
【问题描述】：

我要做的就是在方程式周围设置一些垂直间距。我想设置等式之前出现的一定数量的空间和之后出现的一定数量。我正在尝试各种各样的东西，但它似乎总是对一些疯狂的事情有用。我了解保证金崩溃，但显然不止如此。我已经放置了一些荒谬的空间来说明古怪。有人可以帮忙吗？

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>

结果：

【问题讨论】：

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

标签： html css padding margins

【解决方案1】：

你的利润被关闭了。我已经把它们修好了here。

一般而言，您可以将边距写为：margin: top right bottom left 而不是它们的联合 margin-* 属性 - 其中顶部、右侧、底部和左侧表示您可以根据需要提供的像素宽度值。

【讨论】：

【解决方案2】：

我建议使用 div 并将类设置为“方程式”，因为“方程式”不是有效的 html 标记。一个例子是here

easy math:

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

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

【讨论】：

【解决方案3】：

将display: inline-block; 添加到您的equation。那将解决它。即

在你的 CSS 中：

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

小提琴：http://jsfiddle.net/VGwwL/

【讨论】：