Why does margin-top work with inline-block but not with inline?

by

Section 9.2.4 of the CSS2 specification states:

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline
This value causes an element to generate one or more inline boxes.

Further on in the CSS2 specification (section 9.4.2) we get told that inline elements only respect horizontal margins (proof):

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

The difference between inline and inline-block is that inline elements are treated as inline whereas inline-block elements are effectively treated as blocks (which are visually inline with each other).

Block-level elements respect both horizontal and vertical margins whereas inline-level elements only respect horizontal margins.

More Related Contents:

  1. Make column bigger – CSS code [closed]
  2. How can I make a div not larger than its contents?
  3. How to center a flex container but left-align flex items
  4. How to create uneven rounded sides on a div?
  5. input / button elements not shrinking in a flex container
  6. CSS Cut out circle from a rectangular shape
  7. Problems with CSS sticky footer
  8. What is quirks mode?
  9. How to remove the underline for anchors(links)?
  10. Using “margin: 0 auto;” in Internet Explorer 8
  11. Text overflow ellipsis on two lines
  12. Using CSS to insert text
  13. How can I make a link from a table cell
  14. Rounded table corners CSS only
  15. How does one use the onerror attribute of an img element
  16. Bootstrap 4 – Responsive cards in card-columns
  17. Apply css to AREA MAP
  18. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  19. How can I show dots (“…”) in a span with hidden overflow?
  20. How to make last cell of a row in a table occupy all remaining width
  21. How can I make a 45 degree responsive ribbon with folded corner?
  22. Border with a transparent centred arrow
  23. Add outward curving border to elements like this: ◝◟___◞◜
  24. Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?
  25. Target IE9 Only via CSS [duplicate]
  26. How to define a dynamic mixin or function name in SASS?
  27. Position fixed doesn’t work when using -webkit-transform
  28. How to auto-resize an image while maintaining aspect ratio
  29. css – inline elements ignoring line-height
  30. How do browsers calculate width when child depends on parent, and parent’s depends on child’s

Leave a Comment