What is the difference between display: inline and display: inline-block?

by

A visual answer

Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with

display: inline

display: inline

display: inline-block

display: inline-block

display: block

enter image description here

Code: http://jsfiddle.net/Mta2b/

Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.

Difference of supported styles as summary:

  • inline: only margin-left, margin-right, padding-left, padding-right
  • inline-block: margin, padding, height, width

More Related Contents:

  1. Best replacement for font tag in html
  2. Display property differences for inline-*something*
  3. What is the difference between visibility:hidden and display:none?
  4. What does the “+” (plus sign) CSS selector mean?
  5. How can I replace text with CSS?
  6. How to get div height to auto-adjust to background size?
  7. How to make button look like a link?
  8. Making an iframe responsive
  9. Child with max-height: 100% overflows parent
  10. Center a position:fixed element
  11. Is there a way to interpolate CSS variables with url()?
  12. What does @media screen and (max-width: 1024px) mean in CSS?
  13. Opacity of div’s background without affecting contained element in IE 8?
  14. z-index does not work in Internet Explorer with pdf in iframe
  15. In which direction do selector engines read, exactly?
  16. HTML not loading CSS file
  17. Add ellipses to overflowing text in SVG?
  18. Less lists as a mixin argument(s)
  19. What is the difference between `margin` and `padding` in CSS?
  20. Can I apply a CSS transition to the overflow property?
  21. How to show the first N elements of a block and hide the others in css?
  22. Width equal to content [duplicate]
  23. Align form elements in CSS
  24. Extracting only the css used in a specific page
  25. Google Font not working on Safari
  26. Is a button allowed to have display:grid? [duplicate]
  27. How to fix Internet explorer 7 bug when using percentage widths for layout?
  28. selector for nth nested elements
  29. Bootstrap Navbar list items/links not showing
  30. Double curved shape

Leave a Comment