CSS ideas and methods #15 – CSS field mannequin with out secrets and techniques

Many web designers and developers battle with numerous facets of their craft of their humble starting. CSS field mannequin will be of these issues. I too had an issue with full understanding this a part of CSS. Margin, padding, borders, width and peak. All these properties appeared complicated again then. After I lastly grew to become stable within the fundamentals, one in all my mentors pointed to how borders and padding can simply change the width and peak of ingredient. Once more, I used to be again on the beginning. Since this concern is widespread, let’s discover the CSS field mannequin in the present day …

The CSS field mannequin compose of couple properties talked about above. These are padding, border, margin, width and peak. I selected this specific order that will help you perceive how field mannequin appears to be like like and the way does it work. Within the heart of this mannequin is content material of the ingredient. As you might already famous, all the properties on our record have affect on the full width and peak of the ingredient.

Width & peak

Width and peak merely stands for the width and peak of the ingredient. They are often set in pixels, ems, percentages, centimeters, inches, factors or no matter you need (don’t take me significantly on this and give attention to first three). There’s nothing obscure. No rocket science in any respect. Nevertheless, this isn’t the top of the story. What you even have to know about these properties is that they don’t embrace padding, borders and margins. Later in, I’ll clarify why that is vital to recollect, however now let’s have a fast take a look at the remainder of properties on the record.


Padding stands for an area across the content material of any ingredient. For instance, when you create a paragraph of textual content surrounded by border and also you add a padding, you’ll add a white house equal to worth you set to padding between the textual content and the border. Once you need to use padding, you possibly can both outline a worth for each of 4 sides …


div {
  padding-top: … ;
  padding-right: … ;
  padding-bottom: … ;
  padding-left: … ;

Or you should utilize a shorthand and do all the work on single line. In case of shorthand, there are different choices relying on the values for particular person sides. The identical philosophy of shorthand applies to margin as effectively. Beneath are examples for all of them.


/*Totally different high, identical left and proper and completely different backside*/
div { padding: 7px 15px 62px; /*high left-right backside*/ }

/*Similar high and backside and identical left and proper*/
div { padding: 62px 15px; /*top-bottom left-right*/ }

/*All values are the identical*/
div { padding: 13px; }


Subsequent property from field mannequin is border. Border comes into play proper after padding. Which means in any case you add padding, it’s going to transfer the border too – the width of ingredient shall be modified. For instance, a div with width and peak of fifty pixels shall be greater after including both padding or border. So, when you add padding of 17 pixels and border of two pixels. Once more as in earlier instance, you possibly can outline border for each aspect or use shorthand.

In contrast to the padding shorthand now the syntax is a bit longer. It’s important to outline width of the border, its type and lastly the shade. In the case of type, you possibly can select from a number of choices. These choices are stable (line), dotted, dashed, double, groove (3d grooved), ridge (3d ridged), inset and outset. Another factor concerning the shade … In order for you it to be the identical as shade of the textual content (ingredient), you possibly can omit it.


/*With specified shade*/
div { border: 3px stable #333; /*width type shade*/ }

/*With out specified shade – shade shall be inherited from shade of the textual content (ingredient)*/
div { border: 6px dashed; /*width type*/ }


As with padding, margin additionally provides an area, however across the ingredient as an alternative. So, if we use the paragraph instance from padding case, Now, the textual content will nonetheless be proper subsequent to the border of ingredient and the white house shall be added outdoors it. In case you create one other paragraph, margin will create an area between them.

The Math

Now, after we perceive all of the out there properties included in CSS field mannequin, we will check out how do they really work. I’m sorry for this, however it’s going to require some math to go this half. I included a brief method for counting the full width and peak beneath, however for the sake of simplicity, let’s think about it like this. Width is all the pieces from left to proper – margin-left, border-left, padding-left, width, padding-proper, border-right and margin-right. However, peak is all the pieces from the highest to backside – margin-top, border-top, padding-top, width, padding-backside, border-bottom and margin-bottom. I hope it is smart to you and right here is the “extra formal” model of this method:

Whole width = width + left padding + proper padding + left border + proper border + left margin + proper margin
Whole peak = peak + high padding + backside padding + high border + backside border + high margin + backside margin

Let’s use a easy instance right here to attempt the method in motion. We’ll create a div ingredient with width and peak set to 50px, padding of 13px, border with type set to stable, width to 2px and black shade and margin set to 0px.


div {
  margin: 0px;
  padding: 13px;
  width: 50px;
  peak: 50px;
  border: 2px stable #000;

In case you use following code to create that div and use a browser instruments (inspector or firebug) to examine the div, you can find out that complete dimension of the div is 80px x 80px and it’s proper. Simply use the method and do the mathematics – 50px + 13px + 13px + 2px + 2px + 0 + 0 = 80.


Are you afraid of doing math train each time you employ any of CSS field mannequin properties? Don’t fear about that. There’s a one-line magic trick you are able to do to “neutralize” the impact the properties have on complete width and peak of ingredient. All it’s important to do is to make use of box-sizing property with worth of content-box or border-box. The primary, content-box, is default so it’s going to change nothing – div will stay 80px x 80px. Nevertheless, the second worth – border-box – will lower the full width and peak to its default values we utilized in CSS – 50px x 50px.

After making use of border-box worth the scale (width and peak) of the div will stay the identical and padding and border properties shall be used “outside-in” – it’s going to lower the content material of the ingredient.


I hope that now you will have a transparent thought about how CSS field mannequin works. Nevertheless, one of the best ways to get all the idea beneath your pores and skin is just by means of observe.

In case you preferred this text, please subscribe so you do not miss any future put up.

If you would like to help me and this weblog, you possibly can grow to be a patron, or you should buy me a espresso 🙂

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou

#CSS #ideas #methods #CSS #field #mannequin #secrets and techniques