Why does this inline-block element have content that is not vertically aligned

by

The default vertical-align value is baseline which

Aligns the baseline of the box with the baseline of the parent box

Note: You can see this default value in action by adding vertical-align:baseline to your .divAccountData selector. Since baseline is default the alignment is unchanged.

You need to change it to top to align the blocks at the top, for example:

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

Baseline is defined as

the line upon which most letters “sit” and below which descenders extend

To address why adding text seems to fix the problem it is because

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.

from CSS2 Visual formatting model details

So adding just a single character changes the baseline, causing the second block to appear at the same vertical alignment. This only works if both blocks contain the same number of lines. Try adding more words to one of your blocks and you will see that without forcing vertical-align:top on the second block it will move depending on how many lines of text exist in the first block.

Edit: Found a related question Why is this inline-block element pushed downward?

More Related Contents:

  1. How do I vertically center text with CSS? [duplicate]
  2. Vertically align text next to an image?
  3. How can I vertically align elements in a div?
  4. How do I vertically align text in a div?
  5. Best way to center a on a page vertically and horizontally? [duplicate]
  6. How to align content of a div to the bottom
  7. Vertically align an image inside a div with responsive height
  8. CSS vertical alignment of inline/inline-block elements
  9. How to vertically center a container in Bootstrap?
  10. Vertical Text Direction
  11. How can I vertically center a div element for all browsers using CSS?
  12. How to set the margin or padding as percentage of height of parent container?
  13. Add centered text to the middle of a horizontal rule [duplicate]
  14. Vertical align not working on inline-block
  15. How to vertically align into the center of the content of a div with defined width/height?
  16. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
  17. How does the vertical-align property work?
  18. CSS: Vertically align div when no fixed size of the div is known
  19. How to center div vertically inside of absolutely positioned parent div
  20. Why doesn’t vertical-align work properly when using float in CSS?
  21. Pin a flex item to the bottom of the container
  22. Bootstrap 4 Carousel “Half of previous”
  23. How do I make a placeholder for a ‘select’ box?
  24. What is the order of precedence for CSS?
  25. Print page numbers on pages when printing html
  26. How can apply multiple background color to one div
  27. using text-align center in colgroup
  28. Detecting ‘transform: translate3d’ support
  29. Responsive order confirmation emails for mobile devices?
  30. Using sprites with IMG tag?

Leave a Comment