difference between inline and inline-block should include discussion about replaced / non-replaced elements

[tiansh]

It is reasonable to answer this question only regard non-replaced elements, since for replaced elements, display inline or inline-block are actually (almost?) the same. But without mentioned of replaced elements, its answer is a bit misleading, somehow.

[yangshun]

Further reading regarding replaced elements - http://ahmed.amayem.com/html-replaced-elements-non-replaced-elements-examples/

[ShobikaG]

The displaying behaviour may be same but it is not same in styling , it cannot be replaced at a whole .

In styling point of view, display:inline and display:inline-block has almost same properties like setting width , height , top , bottom , margins . But,
display:inline is not respected to padding but in display:inline-block they are.

Example:

Let's give the same properties and same code in both the display properties

display:inline :-

Here padding is not excecuted or worked.

.od
{
      display:inline;
      width:95px;
      height:50px;
      **padding:18px;**
      background-color: skyblue;
      border:2px solid rgb(35, 35, 243);
      border-radius:10px;
      color:rgb(3, 3, 142);
}

Output:-

For full source-
inline.txt

display:inline-block :-

Here padding property is excecuted or worked.

.od
{
      display:inline-block;
      width:95px;
      height:50px;
      **padding:18px;**
      background-color: skyblue;
      border:2px solid rgb(35, 35, 243);
      border-radius:10px;
      color:rgb(3, 3, 142);
}

For full source -
inline-block.txt