SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Display: block;

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display: block;

    I find I'm starting to get better at CSS -- thanks to you guys here at Sitepoint, and a Sitepoint book or 2.
    But since my learning seems to be very haphazard I find I miss many basic details of selectors and functions.
    One selector is the Display: block;.
    I've seen this applied to images, but just what does it do to an element?

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So all display: block; does is force an image to the bottom?
    Bottom of what? The Page?

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, display: block; makes an element behave like it was a div element? Am I correct in assuming that all the other elements in a page will treat the "display: block;-ed" element like it was a div?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An element in HTML will be rendered as a box: a rectangular area containing the element's content. There are a number of different box types in CSS2. Block-level boxes and inline boxes are two of the most important ones.

    By default (i.e., with a browsers built-in default style sheet) block-level HTML elements generate block-level boxes, and inline elements generate inline boxes. This is a gross simplification, but it will do for now.

    A block-level box has an implied line-break before and after it (in the normal flow). You cannot have two block-level boxes side by side if they are in the normal flow. Inline boxes, on the other hand, are rendered next to one another as long as there is room on one line.

    To change the box type generated by an element, you set the display property. display:block will make the element generate a block-level box, even if the element is inline. display:inline will make the element generate an inline box, even if it is a block-level element.

    Using display:block for images is common in tables. An image is a replaced inline element, by default generating an inline box. Inline boxes can be vertically aligned within the line box that encompasses all inline boxes on a line. The default vertical alignment is baseline, which puts the bottom edge of the image on the text baseline. The text baseline is a few pixels above the bottom edge of the line box, to leave room for the descenders of lowercase characters like 'g' and 'y'.

    If you have a table cell that contains nothing but an image, there will thus be a gap between the bottom of the image and the bottom of the table cell. Setting display:block gets rid of this space, since block-level boxes are rendered differently. Setting vertical-align:bottom would achieve the same thing.

    We're not allowed to link to our own sites here, but if you enter "block vs inline" in Google you will find a three-part article of mine that explains these things in great detail.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think I'm kinda getting it. Thanks guys.
    I think the best way I'm going to see this is just use it and see how it "happens".
    I'm going to check that article, A.C. and see what it says.
    And All4Nerds, thanks for the example (and almost blowing my eyes out with those colors! I'm just getting over a virus, and it really woke me up!), but I could spend the next month dissecting all that code.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •