Box Model | CodeHarborHub

Box Model

In this section, you will learn about the CSS Box Model. The CSS Box Model is a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The box model allows us to add a border around elements, and to define space between elements. The box model is used to create the layout design of a webpage.

📄️ Introduction

Learn about the CSS box model and how it is used to layout elements on a web page.

📄️ Box Sizing

Learn how the CSS `box-sizing` property can be used to control the sizing behavior of elements in the CSS box model.

📄️ Margin

Learn how to use the CSS margin property to create space around elements in your web page layout.

📄️ Padding

Learn how to use the CSS padding property to create space inside elements in your web page layout.

📄️ Width and Height

Learn how to use the CSS width and height properties to control the dimensions of elements in your web page layout.

📄️ Min-Width and Min-Height

Learn how to use the CSS min-width and min-height properties to set the minimum dimensions of elements in your web page layout.

📄️ Max-Width and Max-Height

Learn how to use the CSS max-width and max-height properties to set the maximum dimensions of elements in your web page layout.

📄️ Margin Collapse

Learn how CSS margin collapse works and how to prevent it in your web page layout.

📄️ Border

Learn how to use the CSS border property to create borders around elements in your web page layout.

📄️ Border Radius

Learn how to use the CSS border-radius property to create rounded corners for elements in your web page layout.