[css] display:inline vs display:block

What is the basic difference between the following CSS:

display:inline

and this:

display:block

Using these separately on an element, I get the same result.

Add a background-color to the element and you will nicely see the difference of inline vs. block, as explained by the other posters.

Block

Takes up the full width available, with a new line before and after (display:block;)

Inline

Takes up only as much width as it needs, and does not force new lines (display:inline;)

display:block

takes the entire row(100%)of the screen ,it is always 100%of the screen size

display block example

display:inline-block takes up as much width as necessary ,it can be 1%-to 100% of the screen size

display inline-block example

that's why we have div and span

Div default styling is display block :it takes the entire width of the screen

span default styling is display:inline block :span does not start on a new line and only takes up as much width as necessary

Here is a comparison table:

You can view examples here.

Display : block will take the whole line i.e without line break

Display :inline will take only exact space that it requires.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

You can refer example in this fiddle http://jsfiddle.net/RJXZM/1/.

display: block; creates a block-level element, whereas display: inline; creates an inline-level element. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flow of a document, whereas inline elements do not.

Some examples of block level elements include: div, h1, p, and hr HTML tags.

Some examples of inline level elements include: a, span, strong, em, b, and i HTML tags.

Personally, I like to think of inline elements as typographical elements. This isn't entirely or technically correct, but for the most part inline elements do behave a lot like text.

You can read a more through article on the topic here. Seeing as several other people in this thread have quoted it, it may be worth a read.

a block or inline-block can have a width (e.g. width: 400px) while inline element is not affected by width. inline element can span to the next line of text (example http://codepen.io/huijing/pen/PNMxXL resize your browser window to see that) while block element can't.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

block elements expand to fill their parent.

inline elements contract to be just big enough to hold their children.

Block Elements: Elements liked div, p, headings are block level. They start from new line and occupy full width of parent element. Inline Elements: Elements liked b, i, span, img are inline level. They never start from new line and occupy width of content.

By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur you can refer this link

display: block - a line break before and after the element

display: inline - no line break before or after the element

Display:block It very much behaves the same way as 'p' tags and it takes up the entire row and there can't be any element next to it until it's floated. Display:inline It's just uses as much space as required and allows other elements to be aligned alongside itself.

Use these properties in case of forms and you will get a better understanding.