8/21/2015

CSSInline,blockandnonedisplaystyle

BecomeanExpertinC#,.NET,MVC,JAVA,PHP,AngularJS,Hadoop,
Android,iphone,Testingetc.
byJoiningourTrainingProgramsandTakeYourCareertotheNext
Level!
Toknowmoremakeacallon+919871749695
GetStarted!

CSS Inline, block and none display

style
P o st e d

By

S h aile ndra

Ch auh an, 14 Jun2 0 12

SUBSCRIBE & FOLLOW US

Enter Your Email Address..

U pdat e d On : 10

Jul2 0 12

Total Views : 5,234

Subscribe!

Keywords : inline block elements, css display style, html

elements display style, inline block display style example
pdf
http://www.dotnettricks.com/Tutorial/css/Q67c140612CSSInline,blockandnonedisplaystyle.html

1/8

8/21/2015

CSSInline,blockandnonedisplaystyle

uring creation of an HTML page using CSS, it is essential to know

the HTML elements display behavior. HTML elements have three

display style options inline, block and none. Each option has its
significant in the designing of HTML page.
The basic difference among these display options is very important to
know in order to use CSS efficiently. In this article, I will expose the basic
difference among these display options.

Block display elements makes a separate block with a new

or container.

3.

Using CSS we can fix height and width of block elements.

4.

It can have other inline or block elements.

5.

<div>, <h1><h6>, <p>, <ul>, <ol>, <dl>, <li>, <dt>,

<blockquote>,

<pre>,<form>

are

02. Inline
Inline display elements stay with the flow of the document
and dont force the new line.

http://www.dotnettricks.com/Tutorial/css/Q67c140612CSSInline,blockandnonedisplaystyle.html

C#

7
Ajax

15
1

29
6

Dependency Injection
Design Patterns

10

Fluent Nhibernate

Hybrid Mobile Apps

2

18

Entity Framework

Ionic

26

C# Windows Apps
CSS

displayed as block naturally.

1.

ASP.NET
Backbone

It takes the full available width based on its parent element

<dd>,<table>,

ADO.NET

AngularJS

line before and after.

2.

.Net Framework

Angular Material Design

01. Block
1.

Browse By Category

JavaScript

1
6

2/8

8/21/2015

CSSInline,blockandnonedisplaystyle

jQuery

2.

It takes the width as it needs.

3.

Using CSS we cant fix height and width of inline elements.

4.

It can have only inline elements.

5.

<span>, <a>, <strong>, <em>, <img />, <abbr>,

visible naturally.
We can change the display style of block elements to inline and vice

01. A paragraph html block element <p>

Paragraph width will be equal to the container width
Paragraph height will be equal to its content.

02. A paragraph with fixed height and width

Tutorial

Category

Knockout

LINQ

15

MVC

56

MongoDB

NodeJS

Some tags, like <meta />,<script> and <style> are not

Examples of block and inline elements

Nhibernate

03. None

versa.

jQuery Mobile

MVC 6

<acronym>, <br>,<input> are displayed as inline naturally.

1.

1
OOPS

PhoneGap

SQL Server

48

Unit Testing

5
Web API

10

Web Service

Windows Azure

Windows Phone Apps

SearchWPF
Articles4

Visual Studio
WCF

TFS

The width will be equal to 450px width:450px;, and the height will be
Recent Articles
eBooks Step By Step Training Programs Services About Us
equal to 150px height:150px;.
Popular Articles

http://www.dotnettricks.com/Tutorial/css/Q67c140612CSSInline,blockandnonedisplaystyle.html

3/8

8/21/2015

CSSInline,blockandnonedisplaystyle

Node.js Installation Guide

What is Node.js and Why to
use it?

03. A paragraph converted into an inline

element using display:inline;

CRUD Operations with

AngularJS, RequireJS and

This paragraph is now an inline element. The width and height

WebAPI

taken by it will be acc. to its content.

What is Unit Testing and Why

to use it?

04. An anchor tag html inline element <a>

Mongo DB Comparison
Operators

The width and height taken by it will be acc. to its content.

Creating and Querying Mongo

05. An anchor tag with fixed height and

widthto show that it does not work

Database with Mongo Shell

Mongo Shell Commonly Used
Commands and Methods

We cant set a fixed width and/or height to an inline element.

Quick Reference
MongoDB Installation and

06. An anchor tag converted into a block

element using display:block;

Configuration
What is MongoDB and Why to

This anchor tag is now a block element.

use it?

The width will be equal to the its container.

Node.js development with

The height will be equal to the its content.

Visual Studio

Summary

Like us on Facebook

In this article I try to expose the display property of elements with simple
examples. I hope after reading this article you will be able to make a
good html design. I would like to have feedback from my blog readers.
http://www.dotnettricks.com/Tutorial/css/Q67c140612CSSInline,blockandnonedisplaystyle.html

4/8