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:

![enter image description here](https://i.stack.imgur.com/IYUSH.png)