CSS - Inline box Size

About

Inline objects don't have heights or widths. If you want use them, you probably want to float or inline-block them.

Example

Width

inline block doesn't take the width of a box into account.

.coloredBox {
	width: 20px; 
	height: 20px; 
	border-left: 4px solid aqua;
	border-right: 4px solid red;
	border-bottom: 4px solid black;
	border-top: 4px solid blue;
}
<p>A block box will respond to the width (p is rendered by default as a block box)</p>
<p class="coloredBox"></p>

<p>A inline box will not respond to the width (span is rendered by default as an inline box)</p>
<span class="coloredBox"></span>

Height

Inline objects don't have heights or widths. Why are you setting them inline to begin with? You probably want to either float them or use inline-block.







Share this page:
Follow us:
Task Runner