My inline-block elements are not lining up properly

by

10.8 Line height calculations: the ‘line-height’ and ‘vertical-align’ properties

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

This is a common issue involving inline-block elements. In this case, the default value of the vertical-align property is baseline. If you change the value to top, it will behave as expected.

Updated Example

.position-data {
    vertical-align: top;
}

More Related Contents:

  1. Dynamic component size on page
  2. HTML, CSS: Extra space in the body
  3. Edit Footer line color css
  4. Flexbox: center horizontally and vertically
  5. CSS-only masonry layout
  6. How can I override Bootstrap CSS styles?
  7. Put icon inside input element in a form
  8. Nesting block level elements inside the tag… right or wrong?
  9. Grid properties not working on elements inside grid container
  10. Can I change the checkbox size using CSS?
  11. Applying a background to and/or
  12. How to blur(css) div without blur child element [duplicate]
  13. Border length smaller than div width?
  14. Should I specify height and width attributes for my IMGs in HTML?
  15. Preventing double borders in CSS Grid
  16. CSS ”background-color” attribute not working on checkbox inside
  17. Create a responsive navbar sidebar “drawer” in Bootstrap?
  18. CSS3 transition doesn’t work with display property [duplicate]
  19. Image scaling causes poor quality in firefox/internet explorer but not chrome
  20. My Footer Floats
  21. How can I show three columns per row?
  22. Space between two rows in a table?
  23. How to include a font .ttf using CSS?
  24. Multiple background images in one div
  25. pseudo-element acting like a grid item in CSS grid
  26. Can a recursive variable be expressed in css?
  27. Image behavior within flexbox (rows embedded in columns)
  28. How can I select elements in CSS by partial ID value?
  29. Prevent an element from covering another [closed]
  30. What’s the difference between the HTML width / height attribute and the CSS width / height property on the img element?

Leave a Comment