Using display inline-block columns move down

by

You should add vertical-align: top; CSS declaration to align the columns vertically at the top:

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

Here is a online demo.

Honestly, I’m not a fan of using inline-block to create columns on the page, because of the white spaces between them.

The float was being used for a while, but nowadays flex box or CSS grid can be an option.

More Related Contents:

  1. Trouble with image
  2. Which way to implement this picture in HTML CSS code and bootstrap
  3. Can I have an onclick effect in CSS?
  4. Fill the remaining height or width in a flex container
  5. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  6. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  7. How to remove the arrow from a select element in Firefox
  8. Colspan/Rowspan for elements whose display is set to table-cell
  9. Change cursor type on input type=”file” [duplicate]
  10. How do I install a custom font on an HTML site
  11. Visible Area tag?
  12. problem with and :after with CSS in WebKit
  13. Line break (like ) using only css
  14. How to create a transparent triangle with border using CSS?
  15. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  16. How to get a background image to print using css?
  17. How to set an image’s width and height without stretching it?
  18. Make flex items overlap
  19. HTML class attribute with spaces, it is a W3C valid class?
  20. Aligning elements left and center with flexbox
  21. How to set placeholder value using CSS?
  22. Changing the highlight color when selecting text in an HTML text input
  23. How to run the CSS3 animation to the end if the selector is not matching anymore?
  24. How to add button inside an input [closed]
  25. Unwanted border-radius corners around images in Brave/Chrome browser
  26. Progress Bar with HTML and CSS
  27. scrollable?
  28. Why aren’t my bootstrap 4 columns the same height?
  29. How do I make a text input non-editable?
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment