CSS Box ModelThe components that can be depicted on the web page consist of one or more than one rectangular box. A CSS box model is a compartment that includes numerous assets, such as edge, border, padding and material. It is used to develop the design and structure of a web page. It can be used as a set of tools to personalize the layout of different components. According to the CSS box model, the web browser supplies each element as a square prism. The following diagram illustrates how the CSS properties of width, height, padding, border and margin dictate that how much space an attribute will occupy on a web page. ![]() The CSS box model contains the different properties in CSS. These are listed below.
Now, we are going to determine the properties one by one in detail. Border Field It is a region between the padding-box and the margin. Its proportions are determined by the width and height of the boundary. Margin Field This segment consists of the area between the boundary and the edge of the border. The proportion of the margin region is equal to the margin-box width and height. It is better to separate the product from its neighbor nodes. Padding Field This field requires the padding of the component. In essence, this area is the space around the subject area and inside the border-box. The height and the width of the padding box decide its proportions. Content Field Material such as text, photographs, or other digital media is included in this area. It is constrained by the information edge, and its proportions are dictated by the width and height of the content enclosure. Elements of the width and heightTypically, when you assign the width and height of an attribute using the CSS width and height assets, it means you just positioned the height and width of the subject areas of that component. The additional height and width of the unit box is based on a range of influences. The specific area that an element box may occupy on a web page is measured as follows-
Example 1Here, to explain the CSS box model, we have an instance. Test it NowOutput After the compilation of the above code, you get the following output. ![]() Example 2Here, we also have an illustration to describe the CSS box model. Test it NowOutput After the execution of the code, you get the following output: ![]() Important Point: In the CSS box model, the subject area of an entity box is the region where the content, such as image, text, video, etc., initially appeared. It may also retain boxes of decedent elements.
Next TopicHow to center a table in CSS
|