Pin Me

CSS: Block versus Inline. So What is the Difference?

written by: D. Bickel•edited by: Christian Cawley•updated: 4/17/2011

Knowing the difference between block versus inline CSS styled elements is, or should be, important to you as a web developer. Learning the basic differences will help you to get the best out of them.

  • slide 1 of 6

    CSS: Block vs. Inline

    When working with HTML elements, it is important to know the difference between inline and block elements, sometimes called block-level, elements, so that: you are able to make the right decisions about when and where to use each type; you are aware of the possibilities you have to manipulate them with CSS; you can identify and correct problems more easily when they arise.

  • slide 2 of 6

    Who Decides?

    Most HTML elements start out with the initial CSS value of “display:inline". Which of these elements should then be overwritten to “display:block", is decided by the default CSS of the browser (User Agent) you are using.

    The sample default User Agent CSS suggests block-level CSS property values of “display:block" on the following elements - html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre - the “display:list-item" on the li element, and the “display:table-XX" values, on table elements, tr, thead, tbody, tfoot, col, colgroup, td, th and caption.

    All other elements of the “Visual Formatting Model" thus remaining inline-level elements with the CSS properties of “display:inline", “display:inline-block" or “display:inline-table".

  • slide 3 of 6

    A Visual Peek at Block Versus Inline

    Researching the theme of CSS block versus inline, takes the visitor to a maze of explanations and theories, where not getting confused is a real wonder. I therefore hope to shed a small flood of light for the eyes with a visual explanation of the two.

    css-block-elements Block Elements

    Block elements are the building blocks of your website. As versus the inline CSS element, the block element generates an independent box, and as such, is always given a new line. Easily recognizable “display:block" examples are the header elements - h1, h2, h3, h4, h5, h6 - and the paragraph - p - element.

    The accompanying image shows block elements in an order in which they are commonly used, the elements h1, h2 and p are placed inside a 600 pixel wide div, the red border lets you see how the blocks are working. Each block element is on a new line, the blocks are placed vertically one after the other, and are separated by margins (about collapsing margins). Even if the content text of an element, for example h1, does not require the full width of space in the containing div, the block element takes it nevertheless.

    Other related styling differences for the block element regarding the issue, CSS block versus inline are:

    • height and width dimensions
    • vertical padding
    • vertical margins

    all of which, unlike inline elements, are respected when applying CSS values.

    css-inline-workingtogether Inline Elements

    Inline elements work together with block elements to give, for example, text emphasis with the “<em>" element or bold text with the “<strong>" element. Especially useful is the “<span>" element which, together with the addition of CSS properties, can be used, to manipulate CSS properties like color, font-weight and text-transform, allowing you to create attractive and eye catching snippets within the text of a block-level element.

    Inline elements inherit inheritable CSS property values of the parent block element in which they are flowing, for example font-family, background, font-size and color.

    As opposed to block elements, inline elements ignore CSS values of width and height, vertical padding and vertical margin.

  • slide 4 of 6

    Swapping Roles

    css-swapping-roles Through the use of the CSS display property it is possible to change an inline element to a block element and visa versa, for example, “span {display: block;}" or “h6 {display:inline}".

    This can be useful if you need to build, say, a menu using the “<a>" element where each link needs to be on a new line, with width and vertical padding settings, and a background image for normal and hover states needs to be added. Defining the “<a>" element with the style “a {display:block}", allows you to achieve this.

  • slide 5 of 6

    To Summarize

    In answer to our frequently asked question about “Block versus Inline", we have found out that:

    • block elements are independent units that begin on a new line, respond to vertical and horizontal padding and margin, respond to dimension properties of height and width.
    • inline elements are flowing elements that integrate with the content into which they are placed, ignore vertical margin and padding properties, ignore height and width dimension values.

    Article examples are in the media gallery, please feel free to download and experiment.

    Screenshots provided by writer

  • slide 6 of 6

    References

    The World Wide Web Consortium (W3C), http://www.w3.org

    Schmitt, Christopher. Designing CSS Web Pages. New Riders Publishing, 2003