CSS | Display properties

Every HTML element having display property. Display property tells to web page how an element will render on the web page. By default, all elements of HTML having inline display property. By using of User Agent stylesheets, some elements like div, section, ul having block display property.

User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.

Now we discuss all the display properties of CSS3.

display : inline

span, b,textarea are HTML tags which having display properties inline by default. display:inline means wrapping the element content without break the flow of text.

HTML:
<span>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the      <em>1500s</em>,      when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
CSS3:
em {
  border: 2px solid blue;
  padding: 0 10px 
}

output of above code

display:inline push other elements horizontally only.

HTML:
<span>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the      <em>1500s</em>,      when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
CSS3:
em {
  border: 2px solid blue;
  padding: 10px 10px 
}

display:inline not accepting height and width.

display : block

div, ul,section are HTML tags which having display properties block by default. display:block breaks the line and put the element in new line.

HTML:
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <em>1500s</em>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<em>Block Level content</em>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <em>1500s</em>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
CSS3:
div {
  margin: 10px 10px;
  border: 1px solid red;
}
em{
  margin: 0 10px
}

The first and last element are block level element and middle element is inline element. The inline element placed in next line because blocks break down below inline elements.

display : inline-block

If you set display:inline-block to any element, you able to set width and height of that element and wrapping the element content without break the flow of text.

HTML:
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
<p>dummy</p>
 text ever since the, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
CSS3:
div {
  margin: 10px 10px;
}
p{
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  color: #fff;
  text-align: center;
}

display:inline-block accepting height and width and push other elements horizontally and vertically both side

display : none

display:none remove the items from the web page. The element is still in web page but it is removed visually.

If you create a responsive web page, then two display properties are there one is grid and flex. we will discuss these properties in responsive web pages series.