Height and Width

Width – It sets the width of an element and the width of a element is the space measured from left inside padding edge to the right inside padding edge. This property accepts different values as
  • length unit
  • percentage
  • ‘auto’ keyword
The default value is auto and values are assigned as
.top { width: 600px; }
Before specifying width to an element also consider the border and padding also consisting of the overall horizontal area that the element will absorb and the space between elements given by margins.
Height – It sets the amount of space between the inside padding edge at top and the bottom-inside padding edge.
This property accepts different values which are
  • length unit
  • percentage
  • ‘auto’ keyword
    The default value is auto and values are assigned as
.top { height: 100px; }
It is less commonly used
Auto Values – Width and height properties are given ‘auto’ value by default or when no width or height is given then, the value is the auto keyword.
But applicability of the ‘auto’ keyword changes as per type of element like if applied to a block element which include <div> , <p> , <h1> through <h6> , <form> and <ul> element then, the element spans all the horizontal space available and expands vertically to accommodate the content in it.
But if ‘auto’ is applied on <table> element then it only takes space as needed based on the content as in the vertical dimension.
Percentage Measurements – are used to base the size of element to that of the parent element like element with width of 25% of a parent having a width value of 600px will have a width of 150px.

Get industry recognized certification – Contact us

Menu