CSS - Inline-Block

CSS - Inline-Block

About

Inline-Block is a value of the display property.

An inline-level block container is an element that:

  • behaves like a block box (ie:
    • respond to block box properties such as float
    • grow in space with its children (will wrap on space level its children while an inline will not)
  • is formatted as an atomic inline-level box.

Example

<p>First Paragraph</p>
<p style="column-count: 2;width:30%" >
Second Paragraph is inline (not on a second line) with the first one 
and reacts to block properties such as column-count
</p>
p {
   border:1px solid black;
   display:inline-block;
   padding: 10px
}





Discover More
Firebug Display
CSS - (Display property|Box Type)

The display property defines the box model (layout) type. inline: Default value. Displays an element as inline element. Rules in the user agent's default style sheet may override this value block...
CSS - Block And Inline Layout (Block Formatting context)

CSS - Block And Inline Layout (Block Formatting context) CSS Block and inline layout is the first layout model of CSS. It's also known as: * block formatting * flow layout The component are laid...
CSS - Inline Box

CSS This page is inline box in the block formatting layout context. Inline box can be generated: by default from an inline element or by setting the display property. Inline-level elements...
CSS - Inline Element

Inline-level elements are (HTML|XML) elements of the source document that generate inline block boxes This is the default display value. The user agent's default style sheet may override this value....
CSS - Inline box Size

Inline objects don't have heights or widths. If you want use them, you probably want to float or inline-block them. inline block doesn't take the width of a box into account. Inline objects don't...



Share this page:
Follow us:
Task Runner