ansaurus

Question

Border flows over table but not paragraph with inline display

Answer 1

A:

It is doing the block level elements the way you expect. None of the block-level elements are overlapping.

But the bordered text is not a block level element because you made it an inline box. If you put the bordered text inside the <p>, or inside it's own <p>, or get rid of the display: inline, then you will get a box-level layout as you expected.

Update: yet another way to fix this would be to put the stuff above the table inside a div (that isn't inline) and then style that div with identical but transparent margins and padding.

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

DigitalRoss 2009-09-03 02:37:26

The rendered results looks exactly when the bordered text is inside a <p> (instead of a <div>).Why is the overlapping different between a neighboring <p> and <table>?

Steve Kuo 2009-09-03 02:45:31

The difference between having a `<p>` next to the `<table>` and a `div` that's class `bordered` is that the neighboring `<p>` is block level formatted and your `div` is inline formatted.

DigitalRoss 2009-09-03 03:14:25

Answer 2

+1 A:

Mark F 2009-09-03 05:00:04

ansaurus

tags:

views:

answers:

Border flows over table but not paragraph with inline display

related questions