Display

Details
Written by: Stanko Milosev
Category: CSS
Hits: 4322

Basically we need three display values: block, inline and none.

A block element starts on a new line and stretches out to the left and right as far as it can.

An inline element will keep the text (text is taken as an example), in one line. Example:

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>
	
	<body>
		<p>
			Test block 1
		</p>
		<p>
			Test block 2
		</p>		
	</body>

</html>

CSS:

p {
	display: inline;
}

Example you can check here.

Difference between display: none and visibility: hidden, is that display: none will not reserve the place, for element, while visibility: hidden will still take the place even if element is not displayed. Examples you can see here (I am too lazy to write my own embarassed )