CODEWITHSUNDEEP
htmlcss
Labrador
Labrador

Reputation: 673

inline div not displaying

I feel like I'm about to ask something stupid, but anyway, here goes: I am unable to display inline divs in either chrome or safari. Here's my html document:

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<div style="display: inline; background-color: red; width: 100px; height: 100px;"></div>
		<div style="display: inline; background-color: bisque; width: 100px; height: 100px;"></div>
		<div style="display: inline; background-color: aliceblue; width: 100px; height: 100px;"></div>
		<div style="display: inline-block; background-color: black; width: 100px; height: 100px;"></div>
		<div style="display: inline; background-color: aqua; width: 100px; height: 100px;"></div>
	</body>
</html>

The only div that displays at all is the one whose display is set to "inline-block". There's nothing particular that I want to achieve, I'm just trying to understand why the "inline" divs don't appear, in the interest of furthering my understanding of HTML. From what I've seen online, other people seem to be using inline divs!

Upvotes: 0

Views: 47

Answers (1)

Quentin
Quentin

Reputation: 943185

From the spec:

'height' Applies to: all elements but non-replaced inline elements, table columns, and column groups

and

width Applies to: all elements but non-replaced inline elements, table rows, and row groups

Since you set display: inline the div elements are non-replaced inline elements and do not get any size from those properties.

Those divs do not have any content, so they don't get any size from the content either.

Consequently they take up no space and there is nothing to display the background on.

Upvotes: 4

Related Questions