Wednesday, April 13, 2011

What exactly does display:block; do to an element?

What are the exact specs of display:block? I know quite a few of the specific things applying this to an element will do but I would like to hear them all.

Thanks.

From stackoverflow
  • Quote from W3C

    In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.

    In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's content area may shrink due to the floats).

  • From the CSS2 spec:

    This value causes an element to generate a block box.

    More info can be found on Quirksmode

  • Autistic Cuckoo's article about display properties and their differences (part 1, part 2, part 3) is also a recommended read.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.