Paige Moore
Dev Blog

fancy letter P
  • Home
  • Identity & Values
  • Learning Plan
  • Emotional Intelligence
  • THE DOM
  • Problem Solving
  • Neuroplasticity
  • Foundations Reflection
  • Bootcamp Learning Plan

    • Inline vs Inline-Block

    In this blog, we will see the difference between Inline vs. inline-block.

    The display property has many different values which are very useful and is a commonly used property to control layout. It defines how an element is displayed. Every HTML element has a default display value depending on what type of element it is.

    Inline

    This property is used to display an element in the same line

    • An inline element does not start on a new line and only takes up as much width as necessary.
    • The height and width of the properties are not affected.
    • Only effect the left and right sides of the margins.

    Example:

    If we place a button element with the display: inline; the element will take up as little space as possible. The padding on the element does not push other element away in a vertical direction. Padding on the left and right will push away because it is inline.

    buttons overlapping

    Image sourced from learnwebtutorials

    Inline-block

    This is used to set a display on an element as an inline block container.

    • Allows setting a width and height on the element.
    • The top and bottom margins/paddings
    • Does not add a line-break after the element, so the element can sit next to other elements.
    • it is used to display an element as an inline-level block container.

    Example

    If we set the CSS of a button to be display: inline-block; its padding pushes away other surrounding elements. The left, right, top, bottom padding take up the space in the layout.

    buttons are not overlapping

    Image sourced from learnwebtutorials