CSS – Dimension
CSS – Dimension
For designing text into various ways inside a box/element, we have already used border, padding and margin properties. The CSS dimension properties allow controlling the dimension of a box/element with border, padding and margin properties.
Various CSS dimension properties include,
Height and width: it specifies the height and width of the box.
Line-height: it specifies the height of the line of text.
Max-height: it specifies the maximum height of the box.
Min-height: it specifies the minimum height of the box.
Max-width: this property sets the maximum width of the box.
Min-width: this property sets the maximum width of the box.
These values can be taken as in pixel (px), percentage (%) or auto keyword.
Example:
<html>
<head>
</head>
<body>
<p style = "width:300px; height:150px; border:1px solid red; padding:3px; margin:7px;line-height:auto;">
This element has 300pixels wide with 150 pixels hight and auto line-height
</p>
<p style = "width:500px; max-height:15px; border:1px solid red; padding:3px; margin:8px;">
This element has 500pixels wide and max-height 15 pixels.
</p>
<p style = "width:250px; min-height:10%; border:1px solid red; padding:3px; margin:8px;">
This element has 250 pixels wide and min-height 10%.
</p>
<p style = "max-width:350px; height:100px; border:1px solid red; padding:3px; margin:8px;">
This element has 350 pixels max width and height 100 pixels.
</p>
<p style = "min-width:5%; height:20%; border:1px solid red; padding:3px; margin:8px;">
This element has 5% min width and height 20%.
</p>
</body>
</html>
Output:
