display inline vs display block

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

block elements expand to fill their parent   inline elements contract to be just big enough to hold their children

User · Answer

display  block means that the element is displayed as a block  as paragraphs and headers have always been  A block has some whitespace above and below it and tolerates no HTML elements next to it  except when ordered otherwise  by adding a float declaration to another element  for instance    display  inline means that the element is displayed inline  inside the current block on the same line  Only when it s between two blocks does the element form an  anonymous block   that however has the smallest possible width   Read more about display options   http   www quirksmode org css display html

User · Answer

Here is a comparison table   You can view examples here

User · Answer

display  block - a line break before and after the element  display  inline - no line break before or after the element

[css] display:inline vs display:block

Examples related to css