CSS Tutorials

adplus-dvertising
Dimensions In CSS
Previous Home Next

CSS dimension properties allows us to set various dimension across the HTML elements which includes defining the height, width and space. Various dimension properties are: height, line-height, max-height, min-height, width, min-width and max-width. Each property will be dealt separately.

There are following properties that allow you to control the dimensions of a box.

  1. Height: The height property is used to set the height of a box.This property is used to set height of box or any other HTML element. It is used for rendering images or setting height to any HTML element. The possible values that can be used are:
    • Auto method: When developers do not wish to define value for height, it is determined by browser. Hence, by default height is set automatically set by differently by different browsers
    • Percentage method: The definition of height in percentage with regard to the parent object is done by using Percentage Method.
    • Length method: This defines the height in an absolute scale such as centimeter, millimeter or pt. Sometimes we use relative units such as em or px.
  2. Width: The width property is used to set the width of a box.Width property is used to set width of box or any other HTML element, often used for rendering images. We use following properties for setting width:
    • Length: Specifying length along with units if measure.
    • Percentage: A percentage of the width in regard to the parent element.
    • Auto: Allows the user-agent to set the width based on inheritance and pre-set user-agent rules.
    • Inherit: Rarely used property that allows the element to have the same width setting as the parent.
  3. line-height: The line-height property is used to set the height of a line of text.This property is used to set the height of a line in a text i.e. this property allows you to increase the space between lines of text or to set the distance between two adjacent lines. The distance is between the baselines of the adjacent lines. The value of the line-height property can be normal, number, length or percentage which is explained below:
    • Normal: This sets the line height to the default or inherited value based on the font size of the element.
    • Number: This sets the line height of the current font-size to be multiplied by a specified number.
    • Length: This sets a fixed distance between the lines. The units used are: em, px, cm or pt.
    • Percentage: This sets the line height in percentage to the element's font size.
  4. Max-Height: The max-height property is used to set a maximum height that a box can be.The max-height property allows you to specify maximum height of a box. The value of the max-height property may range from a number, length, to percentage.
  5. Min-Height: The min-height property is used to set the minimum height that a box can be.Sets the minimum height of an element
  6. Max-Width: The max-width property is used to set the maximum width that a box can be.The max-width property allows you to specify maximum width of a box. The value of the max-width property like max-height property may vary from number, length, to percentage.
  7. Min-Width: The min-width property is used to set the minimum width that a box can be.Sets the minimum width of an element.
Simple Example
<html>
<head>
<style>
p{
border:groove;
background-color:#FFCCFF;
width:400;height:300;
line-height:30px;
max-height:40px;
min-height:15px;
max-width:40%;
min-width:20%;
}
</style>
<body>
<p>Different types of dimension properties</p>
</body>
</html>

Output

Previous Home Next