Question about the nature of CSS tables

1

Hi there. Don’t know if this is the right place to ask this, but I have a question about CSS tables. Basically I’m following a tutorial which is utilizing bootstrap to create a responsive website, the only issue I’m having right now is to why giving an element the property of dispaly: table is causing the element to be half way down the page, instead of at the top like it would be if it were a regular old block or inline element. It’s all part of the tutorial, I just don’t know why or how display: table does this vertical centering.
Is there supposed to be a difference between display block and display table in terms of it’s effect on an element in a bootstrap website, or is my vertical padding coming from something else? Thanks.

Sorry if this is not enough information for the context, let me know and I’ll add more code/context.

2

Display:table give you properties like, well, a table

if you code a table, table cells have the property vertical-align that places its content, top, middle or bottom. This is essentially applying the same thing to your box

3

So would just applying display: table, leave it aligned at the top by default? Thanks for the help btw

4

I think vertical-align’s default value is alone the baseline of the parent.

display:table doesn’t do anything to the element itself, it denotes how the content of the element is laid out.

I’d suggest you read the reference page on MDN on the display property, because not all displays option applies the same way