This involves specifying how the browser should adjust elements’ box sizes in relation to each other when rendering them and whether or not boxes should be resizable, once rendered.
1. Specifying How Boxes Are Rendered
The default way in which the browser calculates the rendered size of an element is by adding the values specified for the border, padding, and margin properties to those specified for the width and height properties. The box-sizing property allows this relationship to be changed and is used to specify how the browser should calculate the rendered widths and heights of elements. Being able to do this can make creating layouts easier and more intuitive, in that it allows you to prevent a change in the size of an element’s box when border, margin, or padding is added. It is non- inherited, and the two values it takes are described in Table 10.14.
Figure 10.59 shows how the box-sizing properly is used, and Figure 10.60 depicts the result. The example uses only the border-box value, but the result of using the content-box value (the default) is also shown on the left of Figure 10.60.
In the example, the * {} rule says to apply the specified box-sizing to all elements. As introduced in Chapter 8, * is a universal selector. The body {} rule makes the width of the page 50% that of the browser window, plus 20px padding. The div{} rule centers the text for all the <div> elements (text-align is discussed fully in Chapter 14). The parent{} rule makes the width of the <div> element of class “parent” 50% that of the page. The childl {} rule makes the width of the childl <div> element 90% that of the parent <div> element, plus a padding of 20% of its width and a border of 2px on all four edges. This is why the child 1 box extends beyond the width of the parent box with the default box-sizing setting. Lastly, child2{} makes the width of the child2 <div> element 50% that of the parent <div> element, plus 20px padding and 2px border.
2. Making Boxes Resizable
By default, once an element is rendered, its size cannot be altered by the user. This behavior can be changed by using the resize property. It is non- inherited, and when specified, it displays a control mechanism at the bottom-right comer of an element’s box; when the cursor is over it, the cursor changes shape to indicate the direction in which the user is allowed to resize the box. However, in order for the property to work, the overflow property, introduced earlier in this chapter, must be used and the value must be hidden, scroll, or auto. The standard values supported by the property as of time of writing are listed in Table 10.15. Figures 10.61 and 10.62 show how the property is used and depict the result.
In the example, notice that the shorthand border property is used to create the solid-line border around the element. This is not mandatory but helps to better visualize the border of the element and the resizing control mechanism at the bottom- right corner.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.