How Come Css Changes A Div When I Add A Block-styled Element Inside It?

When I remove the display:block from a p inside a div, it ignores the top-margin or it's own hight or something like that. It snuggles up right next to the element above it. Does a

Solution 1:

Inline elements simply don't take vertical margins or height into account. Block elements do.

Edit:

In response to comments, it looks like there are two issues at play here.

1. You have two elements with id='generals'. Change this to class='generals'.
2. Add overflow: hidden to your generals style. All of the elements inside it are floated, and so don't apply to the height of the element. Adding overflow: hidden changes how the element is displayed, clearing all the floats inside it.