Border flows by table, but not paragraphs with integrated display

Question

Using HTML and CSS.

I have text surrounded by a frame, using display:inlineto make the frame a little larger than the text. The problem is that the border overlaps certain surrounding block level elements. It overlaps <table>and <form>, but not <p>.

CSS:

.bordered {
  padding: 0.6em;
  border-style: solid;
  border-width: 2px;
  background-color: #FFFFCC;
  border-color:#E8E800;
  display: inline;
}

HTML:

<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<table><tr><td>Table text</td></tr></table>

Result:

Why is this? And why is this incompatible between the various elements of the block level? I expect the text of the table cell to be vertically aligned just like the text of the paragraph.

: , display:inline , , . display:block ( <p>), , .

Answer 1

P . . TABLE . , P DIVs .

P http://homepage.mac.com/estranged/images/css01.png

TABLE http://homepage.mac.com/estranged/images/css02.png

Answer 2

, . .

, . <p> <p> display: inline, , .

: - div ( ), div , .

.blockMargin {
  padding-bottom: 0.6em;
  border-width: 2px;
  border-color: transparent;
}