CODEWITHSUNDEEP
css
user1576594
user1576594

Reputation: 11

What are best practices for using "display: inline-block"

"Inline-block" and "position" confuse me when I use them with list items. Dreamweaver CS3 isn't helping since it doesn't show the blocks inline but as a stack of elements. I'm interested in learning the best practices for getting block elements of various heights to align along their top edges while also centering within the total available space.

Would you please look at this pared-down code to see if I've done it properly? http://www.words4it.com/test_block1.html

Here's the CSS: http://words4it.com/test_block1.css

Thank you

Upvotes: 0

Views: 1290

Answers (1)

Anton Boritskiy
Anton Boritskiy

Reputation: 1569

here is the good article about positioning elements

here is the good article about element sizes, margins and paddings

and after all, my short advice about blocks, inline-blocks and floats: browser has two general models of aligning elements:

  1. inline model, blocks stick to each other horizontally making horizontal lines of blocks with line-breaks between blocks, you may think about it like words in the text. Using this model you operate the following properties:

    • font-size
    • line-height
    • text-align
    • vertical-align
    • etc.

  2. block model, blocks stick to each other vertically making vertical stack of blocks, you may think about it like paragraphs in the text. Using this model you operate the following properties:

    • margin
    • padding
    • float/clear
    • position
    • etc.

The corresponding model should be used when you are trying to achieve the described behaviour. There is little exception: several blocks with the same float value (e.g. float:left) can behave very similar to several inline-blocks, the difference is in browser compatibility and thу choise should depend on situation.

Upvotes: 1

Related Questions