51

Display inline, inline-block, block in CSS

 6 years ago
source link: https://www.tuicool.com/articles/hit/FvI7ryR
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Display property in CSS specifies the display property of the HTML element. Display in CSS defines how we generate boxes.

  • display => none
  • display => inline;
  • display => block;
  • display => inline-block;

Display as nonemeans hides the HTML element.

Display as inlinemeans height and width properties will have no effect block which is at its default value.

Display as blockmeans HTML element takes full width.

Display as inline-blockmeans HTML tag is solid and not breakable like click button so that full text appears on one line.

In CSS Display properties are defined as 

display: inline;

display: inline-block;

display: block;

In HTML, DIV element is an example of a display as a block. while SPAN element is an example inline display in CSS

<p>This is a <div>DIV HTML ELEMENT</div> which takes full width</p>

<p>This is a <span>SPAN HTML ELEMENT</span> which takes dafault width</p>

UvqmMnv.jpg!web


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK