Inline elements and padding

wild-web-dev's photo
wild-web-dev

Published on Jul 15, 2021

Click to read this article

In nutshell: Width & Height can't be applied to inline elements. ** an inline element has complete padding properties but no margin-top/bottom properties, only margin-left/right properties work.

Have you ever tried to add padding to

  • elements that have been set to “display: inline”? Did you find that the padding seemed to be rendering in an unusual way?
  • In the example below, the

  • elements have been set to “display: inline”, and then 1em of padding has applied to all sides. Unfortunately, the padding on the top and bottom of the
  • elements seems to have been ignored causing the elements to overlap each other.
  • image.png Inline elements laid out in rows

    To understand why this is happening, we need to look at the different ways that block level and inline elements treat properties such as width, height, padding and margins.

    Block level elements The W3C’s CSS2 spec defines block level elements as elements of the source document that are formatted visually as blocks. In other words, block level elements are normally displayed as blocks with line breaks before and afterwards.

    Examples of block level elements Element Description

    information on author

    long quotation

    push button

    table caption

    definition description deleted text

    generic language/style container

    definition list

    definition term

    form control group

    interactive form

    heading

    heading

    heading

    heading

    heading

    heading


    horizontal rule

    fieldset legend

  • list item
  • client-side image map

    alternate content container for non frame-based rendering

    alternate content container for non script-based rendering

    generic embedded object

      ordered list

      paragraph

          preformatted text

      table

      table body

      table footer

      table header

      table row

        unordered list Inline elements The W3C’s CSS2 spec defines inline elements as elements of the source document that do not form new blocks of content; the content is distributed in lines. So, inline content is displayed with no line breaks before or afterwards.

        Examples of inline elements Element Description anchor abbreviated form

        acronym bold text style I18N BiDi over-ride

        large text style
        forced line break

        push button citation computer code fragment deleted text instance definition emphasis italic text style

        form control inserted text text to be entered by the user

        form field label text

        client-side image map

        generic embedded object short inline quotation sample program output, scripts, etc.

        option selector small text style generic language/style container strong emphasis subscript superscript

        teletype or monospaced text style instance of a variable or program argument Dimension – a key difference between block and inline elements If you try to add dimension to an inline element, some properties will be applied, some properties will be partially applied and others will not be applied at all. The most noticable properties are width, height, margin and padding.

        Inline elements and width The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘width’ property does not apply. In the example below, a width of 200px has been applied to the inline element. As you can see, it has no affect on the surrounding content:

        image.png Inline element with width applied

        Inline elements and height The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property. In the example below, a height of 50px has been applied to the inline element. As you can see, it has no affect on the surrounding content:

        image.png Inline element with height applied

        Inline elements and padding While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the element. As you can see, it has an affect on the content on each side, but not on content above or below:

        image.png Inline element with padding applied

        Inline elements and margins Margins operate in the same way as padding on inline elements. In the example below, 50px of margin has been applied to all sides of the element. While the left and right edges are effected, the content above and below are not:

        image.png

        Changing an element’s “display” property from inline to block It is possible to change the display property of an inline element to “block”. This will give it a block level appearance without changing it’s actual structure. For example, the element below has been set to “display: block”. As soon as this occurs, properties like width, height, margin and padding are applied is if it were a block level element.

        image.png Inline element set to display block

        Changing an element’s “display” property from block level to inline You can also change block level elements so that they display inline. If an

      • element is set to “display: inline”, width, height, padding and margin will immediately operate as they do for any other inline element. This is what caused the
      • element to ignore top and bottom padding in our original example.
      • Overcoming padding issues for

      • elements set to “inline” There are many ways to overcome the padding issue shown above. Here is one:
      • Step 1 Remove any reference to “display: inline” and allow the

      • elements to return to their natural state – “display: block”. Padding is now applied to all sides of the element, but the elements sit in a vertical stack.
      • image.png

        Inline elements set out as blocks

        Step 2 Set the

      • element to “float: left” and give it a width – in this case 8em has been used. This will allow the list items to sit beside each other. If there is not enough room for all list items to sit next to each other, those that do not fit will move down and sit below.
      • image.png adding08

      table data cell table header cell
     
    Share this