•  
     

display:block, display:inline-block e display:inline - HTML & CSS

index.html

Código: Selecionar todos

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>display:block</title>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div id="four"></div>
	</body>
</html>


stylesheet.css

Código: Selecionar todos


* {
	border: 1px dashed blue;
}

div {
	height: 50px;
	width: 100px;
	border: 2px solid black;
	border-radius: 5px;
	display:block;
	
}

#one {
	background-color: #FF0000;
}

#two {
	background-color: #0000FF;
}

#three {
	background-color: #FFD700;
}

#four {
	background-color: #308014;
}

Demo: http://jsfiddle.net/dLNLH/


-------------------------------------



index.html

Código: Selecionar todos

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>display:block</title>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div id="four"></div>
	</body>
</html>


stylesheet.css

Código: Selecionar todos


* {
	border: 1px dashed blue;
}

div {
	height: 50px;
	width: 100px;
	border: 2px solid black;
	border-radius: 5px;
	display:inline-block;
	
}

#one {
	background-color: #FF0000;
}

#two {
	background-color: #0000FF;
}

#three {
	background-color: #FFD700;
}

#four {
	background-color: #308014;
}

Demo: http://jsfiddle.net/dLNLH/1/


----------------------------------------------


index.html

Código: Selecionar todos

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>display:block</title>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div id="four"></div>
	</body>
</html>


stylesheet.css

Código: Selecionar todos


* {
	border: 1px dashed blue;
}

div {
	height: 50px;
	width: 100px;
	border: 2px solid black;
	border-radius: 5px;
	display:inline;
	
}

#one {
	background-color: #FF0000;
}

#two {
	background-color: #0000FF;
}

#three {
	background-color: #FFD700;
}

#four {
	background-color: #308014;
}

Demo: http://jsfiddle.net/dLNLH/2/