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

Question

What exactly is the difference between the inline and inline-block values of CSS display

User · Accepted Answer

A visual answer  Imagine a  lt span gt  element inside a  lt div gt   If you give the  lt span gt  element a height of 100px and a red border for example  it will look like this with  display  inline    display  inline-block    display  block    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

User · Answer

display  inline  is a display mode to use in a sentence  For instance  if you have a paragraph and want to highlight a single word you do    lt p gt      Pellentesque habitant morbi  lt em gt tristique lt  em gt  senectus     et netus et malesuada fames ac turpis egestas   lt  p gt    The  lt em gt  element has a display  inline  by default  because this tag is always used in a sentence  The  lt p gt  element has a display  block  by default  because it s neither a sentence nor in a sentence  it s a block of sentences   An element with display  inline  cannot have a height or a width or a vertical margin  An element with display  block  can have a width  height and margin  If you want to add a height to the  lt em gt  element  you need to set this element to display  inline-block   Now you can add a height to the element and every other block style  the block part of inline-block   but it is placed in a sentence  the inline part of inline-block

User · Answer

Block - Element take complete width All properties height   width  margin   padding work Inline - element take height and width according to the content  Height   width   margin bottom and margin top do not work  Padding and left and right margin work  Example span and anchor  Inline block - 1  Element don t take complete width  that is why it has  inline  in its name  All properties including height   width  margin top and margin bottom work on it  Which also work in block level element That s why it has  block  in its name

User · Answer

All answers above contribute important info on the original question  However  there is a generalization that seems wrong   It is possible to set width and height to at least one inline element  that I can think of      the  lt img gt  element   Both accepted answers here and on this duplicate state that this is not possible but this doesn   t seem like a valid general rule   Example    x000D   x000D  img   x000D    width  200px  x000D    height  200px  x000D    border  1px solid red  x000D    x000D   lt img src       gt  x000D   x000D   x000D    The img has display  inline  but its width and height were successfully set

User · Answer

splattne s answer probably covered most of everything so I won t repeat the same thing  but  inline and inline-block behave differently with the direction CSS property   Within the next snippet you see one two  in order  is rendered  like it does in LTR layouts  I suspect the browser here auto-detected the English part as LTR text and rendered it from left to right    x000D   x000D  body   x000D    text-align  right  x000D    direction  rtl  x000D    x000D   x000D  h2   x000D    display  block     just being explicit    x000D    x000D   x000D  span   x000D    display  inline  x000D    x000D   lt h2 gt  x000D                   x000D     lt span gt one lt  span gt  x000D     lt span gt two lt  span gt  x000D   lt  h2 gt  x000D   x000D   x000D    However  if I go ahead and set display to inline-block  the browser appears to respect the direction property and render the elements from right to left in order  so that two one is rendered    x000D   x000D  body   x000D    text-align  right  x000D    direction  rtl  x000D    x000D   x000D  h2   x000D    display  block     just being explicit    x000D    x000D   x000D  span   x000D    display  inline-block  x000D    x000D   lt h2 gt  x000D                   x000D     lt span gt one lt  span gt  x000D     lt span gt two lt  span gt  x000D   lt  h2 gt  x000D   x000D   x000D    I don t know if there are any other quirks to this  I only found about this empirically on Chrome

User · Answer

One thing not mentioned in answers is inline element can break among lines while inline-block can t  and obviously block   So inline elements can be useful to style sentences of text and blocks inside them  but as they can t be padded you can use line-height instead    x000D   x000D   lt div style  width  350px  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  x000D     lt div style  display  inline  background   F00  color   FFF  gt  x000D      Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  x000D     lt  div gt  x000D    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D   lt  div gt  x000D   lt hr  gt  x000D   lt div style  width  350px  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  x000D     lt div style  display  inline-block  background   F00  color   FFF  gt  x000D      Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  x000D     lt  div gt  x000D    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D   lt  div gt  x000D   x000D   x000D

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

A visual answer

Examples related to css

Examples related to display