![\"CSS](\"https:\/\/cssnewbie.com\/wp-content\/uploads\/2020\/09\/43160-1024x819.jpg\")
<\/p>\n<\/p>\n
<\/p>\n
<\/p>\n
\u201cCSS Box Model\u201d is generally referred to as design & layout in CSS. It is the box that can be imagined as concentric-rectangles which has the outer-most rectangle as margin. This rectangle is ordinarily transparent. The next rectangle inside represents a border which has a variable thickness and is filled with colors. Inside this, the third rectangle is of padding which is transparent too and the one in the center is the content that has been written inside the HTML tag.<\/p>\n
CSS Box Model is the most basic concept that should be learned by a developer to understand the elements of a page. According to W3C<\/a>, the CSS box model forms the boxes that make the basic visual formatting of a web page.\u00a0The CSS Box Model underpins most of the layout and positioning<\/a> of a webpage.<\/p>\n Let’s take a look at one such CSS Box Model<\/p>\n <\/p>\n We will make our first sample box to have an understanding. Remember, we style the box in CSS. So have a look at the HTML code and go meticulously through the CSS code. The CSS code has several properties like width, border, padding, margin-left & margin-right. <\/em>Alter the values in it and understand the output using CodePen<\/a>.<\/p>\n Here’s the HTML code:<\/p>\n CSS FileName: SampleBox.css<\/p>\n The output will look as follows:<\/p>\n The sample box which we created above can be aligned to the center simply by adjusting the outer rectangle of our Box Model, i.e. the margin. So we can change the value of the margin in a manner the box shifts to the center of our webpage. Here I have set the value of margin-right <\/em>to 400px which aligned the box to center, change those values & follow the code for better clarity.<\/p>\n Here’s the HTML code:<\/p>\n CSS File: Centerbox.css<\/p>\n This is what the output will be:<\/p>\n <\/p>\n The property border<\/em> has several values, we can use\u00a0 \u201cdashed color\u201d with color being what we want and the dashes break the border. Learn using the code given below:<\/p>\n HTML Code:<\/p>\n CSS File: Dashedbox.css<\/p>\n Here’s how the output will be:<\/p>\n The following codes help us understand how altering the values can yield different outputs. Also, we can imply from the codes that<\/p>\n Total element width<\/strong> = width + left border + right border + left padding + right padding + left margin + right margin.<\/p>\n And,<\/p>\n Total element height<\/strong> = height + top margin + bottom margin + padding + bottom padding + top border + bottom border.<\/p>\n The calculation of total element width and height if known to us can be helpful while designing the webpage with specific alignments.<\/p>\n The beginning of the article introduced the concept of the Box Model and how to add it to our code. We also learned how to align the box model and add different types of borders to it. A novice developer should always start out by understanding the concept of CSS Box Model to create aesthetic looking web designs. To keep learning such CSS techniques, subscribe to our blog<\/a>!<\/p>\n![\"CSS](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/box-model-1024x570.png\")
<\/p>\n<html>\n<head>\n<title> How to add css box model <\/title>\n<link rel= \"stylesheet\" href= \"samplebox.css\">\n<\/head>\n<body>\n<h2> The Box Model <\/h2>\n<p> CSS Box Model added here is around the content inside the div tag. <\/p>\n<div> <p> I am wrapped inside with padding of 50px & border 300px. <\/p>\n<\/div>\n<\/body>\n<\/html><\/pre>\n
div {\nbackground-color: lightgrey;\nwidth: 300px;\nborder: 15px solid green;\npadding: 50px;\nmargin-left: 20px;\nmargin-right: auto;\n}<\/pre>\n![\"CSS](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/SampleBox-1024x268.png\")
<\/p>\nHow To Center The Box Model<\/h3>\n
<html>\n <head>\n <title>How to add css box model<\/title>\n <link rel= \"stylesheet\" href= \"centerbox.css\">\n <\/head>\n <body>\n <h2>\u00a0 The Box Model <\/h2>\n <p> Altering the values in the properties to see how the output cahnges <\/p>\n <div><p> I am in the center of the webpage all thanks to margin-left <\/p>\n <\/div>\n <\/body>\n<\/html><\/pre>\n
div {\nbackground-color: powderblue;\nwidth: 400px;\nborder: 20px solid yellow;\npadding: 70px;\nmargin-left: 400px;\nmargin-right: auto;\n}<\/pre>\n![\"CSS](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/CenterBox-1024x282.png\")
<\/p>\nHow To Create A Dashed Border & Align The Box<\/h3>\n
<html>\n <head>\n <title> How to add css box model <\/title>\n <link rel= \"stylesheet\" href= \"dashedbox.css\">\n <\/head>\n\n <body>\n <h2> The Box Model <\/h2>\n <p> Creating a different kind of border and aligning the box model differently.<\/p>\n <div><p> The dashed border is of the value for the property <i>border<\/i> <\/p>\n <\/div>\n <\/body>\n<\/html><\/pre>\n
div {\nbackground-color: orange;\nwidth: 400px;\nborder: 5px dashed black;\npadding: 15px;\nmargin-left: 60%;\nmargin-right: auto;\n}\n\n<\/pre>\n![\"CSS](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2020\/09\/Dashedbox-1024x267.png\")
<\/h3>\nConclusion<\/h3>\n