html和css试图在我的方程周围得到一些垂直空间
[英]html and css trying to get some vertical space around my equations
问题描述
All I am trying to do is get some vertical spacing around equations. 
我所要做的就是在方程周围得到一些垂直间距。 I want to set a certain amount of space that appears before the equation and a certain amount after. 我想设置在等式之前出现的一定量的空间和之后的一定量。 I am trying all sorts of stuff, but it always seems do to something crazy. 我正在尝试各种各样的东西，但似乎总是疯狂的事情。 I understand about margin collapsing, but it's clearly more than that going on. 我理解保证金崩溃，但显然不止于此。 I've put in some absurd amounts of space to illustrate the wackiness. 我已经投入了一些荒谬的空间来说明这种古怪。 Can anyone help? 有人可以帮忙吗？
calcStyle.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: 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>
Result: 结果：
3 个解决方案
解决方案1
1 已采纳 2011-12-25 04:25:44
You have your margins off. 你有你的利润。 I have fixed them up here . 我有固定起来这里 。
In general, you can write your margins like: margin: top right bottom left than their allied margin-* attributes - where top, right, bottom and left represent the pixel width values that you can give as per your needs. 一般情况下，您可以将边距写为： margin: top right bottom left比其盟友margin-*属性 - 其中top，right，bottom和left表示您可以根据需要提供的像素宽度值。
解决方案2
1 2011-12-25 04:35:01
解决方案3
0 2011-12-25 04:41:46
Add display: inline-block; 添加display: inline-block; to your equation . 你的equation 。 That will solve it. 这将解决它。 ie 即
in your css: 在你的CSS中：
equation {
...
display: inline-block;
...
}
Fiddle: http://jsfiddle.net/VGwwL/ 小提琴： http ： //jsfiddle.net/VGwwL/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.