Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.

 

Takeway:

1. Inline: Can NOT add height and width. But can add margin and padding
2. Inline-block: Can add height, width, margin and padding. Not take the whole row.
3. Block: Can add height, width, margin and padding, take the whole row.

  
       
         
Here is some text in a paragraph tag, a paragraph tag has a dispay property of block by defualt. A span is inline by defualt but with some styling we can make it inline-block.  Inline block will respect top and bottom margins and padding. We can also make it block by adding classes and styling them.

 

.box {
     border: 1px solid black;  margin: 5px;  display: block;}p {
     border: 1px solid black;}.inline {
     border: 1px solid blue;  display: inline;  margin-left: 10px;  margin-right: 50px;  padding-left: 10px;  padding-right: 50px;  margin-top: 50px;  width: 500px; // Doesn't work  height: 200px; // Doesn't work}.inline-block {
     border: 1px solid red;  display: inline-block;  margin-right: 20px;  width: 200px;  height: 50px;}.block {
     display: block;  border: 1px solid green;  width: 50px;  height: 100px;}