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:
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>
Result:
You have your margins off. I have fixed them up here.
In general, you can write your margins like:
margin: top right bottom leftthan their alliedmargin-*attributes – where top, right, bottom and left represent the pixel width values that you can give as per your needs.