6. Summary

          In summary, the CSS box model is important in the layout and design of an HTML webpage. It consists of border, margin, padding and the content of the element. Setting these properties will enhance the layout and design of the page. The box-sizing property can be set to either content-box or border box. Content-box will set the width of the content of an element while the border-box will consider the border, padding and the width of the content to set the width of the element box.

          Width and height of the element can also be set using the width and height properties. When the height of the element is less than the height of its content, there is an overflow of the content. Resolving overflow will use the overflow property. With this, you can clip the overflowed element and either add a scroll to see the rest of the content or hide it.

References

CSS | Box model. (2018, August 16). GeeksforGeeks. https://www.geeksforgeeks.org/cssbox-model/

CSS - Borders—Tutorialspoint. (n.d.). Retrieved July 16, 2020, from https:// www.tutorialspoint.com/css/css_borders.htm

CSS - Margins—Tutorialspoint. (n.d.). Retrieved July 16, 2020, from https:// www.tutorialspoint.com/css/css_margins.htm

CSS - Paddings—Tutorialspoint. (n.d.). Retrieved July 16, 2020, from https:// www.tutorialspoint.com/css/css_padding.htm

CSS Box Model. (n.d.). Retrieved July 16, 2020, from https://www.w3schools.com/css/ css_boxmodel.asp