Sprint 2 - Technical
What does it mean to display inline vs inline blocks?
Display inline

With display: inline, the element will stay inline with the element it was nested in and the following css properties are ignored:

  • height
  • width
  • margin-top
  • margin-bottom
  • float

Code:

span.inline {
display: inline;
width: 200px; /* ignored */
height: 200px; /* ignored */
margin: 20px; /* ignored the top and bottom part but not the left and right */
padding: 5px;
border: 5px solid black;
background-color: #27ddce;
color:antiquewhite;
}

Result:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo in odit autem ratione praesentium totam. Nulla esse quaerat adipisci tenetur, quia eos commodi doloremque nemo dolore vel laborum magni est?

Display inline-block

With display: inline-block, the element will stay inline with the element it was nested in and all the css properties are applied.

Code:

span.inlineblock {
display: inline-block;;
width: 200px;
height: 200px;
margin: 20px;
padding: 5px;
border: 5px solid black;
background-color: #27ddce;
color:antiquewhite;
}

Result:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo in odit autem ratione praesentium totam. Nulla esse quaerat adipisci tenetur, quia eos commodi doloremque nemo dolore vel laborum magni est?

© Matthew Uy