CSS box model property

The CSS box model is a CSS module that describes the rectangular boxes and consists of margins, borders, padding, and the real content. Actually, it is essentially a box that wraps around every HTML element and all html elements can be considered as boxes.


Properties controlling the flow of content in a box

Properties controlling the size of a box

Properties controlling the margins of a box

Properties controlling the paddings of a box

Other properties

As the important concepts of CSS are discussed so the most important issues visual formatting system of CSS is important to introduce the feature of the box model.

The easiest way to understand the box model is the idea that each element of between browser pages (both block and inline) is tied in one box. Various kinds of Properties for example – border, margin, padding, and background, etc. can be applied by you to the boxes and boxes of pages move from one place to another.

When you make paragraph using the HTML elements or using <img> tag to make an image, then the web browser considered these factors as the box.

The contents of the box are surrounded by properties that make different models of the boxes; here we show the fundamental property of making box modes. Getting a general diagram the properties of CSS box model can be explained.

For example:

The elements of the Box of model diagram:

Margin: The transparent area on all four sides of the elements.

Border: Every corner of padding or a distinct edge, line or line drawing.

Padding: It is the space between elements and border.

Content: Text, image and audio-video, etc.

Background-color: Color is determined by the inner side of the border to fill all the spaces. If the border is dashed, if not solid background will be filled with the space between the two dashes.

Please note the presentation given below about box model – the two elements have been used there. For example: <h1> and <p>. By pixel values ​​of heading and paragraphs border, margin and padding chose neatly arranged.


Box model found effective.

An example for practice:

HTML Code:

<!DOCTYPE html>
<style type="text/css">
#box{width:600px; height:150px; 
	border-width:2px; border-style: solid; 
	border-color:red; background:#ccc;}
<div id="box">
<h1>Box Model</h1>
<p>The CSS box model is a CSS module that describes the rectangular boxes and consists of margins, borders, padding, and the real content.</p>

Display in Browser:

css box model

What if these values are undeclared?

If padding or borders are not declared, they’re either zero or default value of the browser. If the width of a box


or container is undeclared (and the box or container is a block level element), matters get a bit weird. Let’s start with that, and then move on to some different good-to-know being about the box model.

The Default width of Block Level Boxes:

In case you do not declare a width, and the field has static or relative positioning, the width will remain a 100% (hundred) % in width and the padding and border will push inwards as opposed to outward. However, in case you explicitly set the width of the box to be 100% (hundred) %, the padding will push the box or container outward as regular.

box property

The lesson here is being that the default width of a box or container is not truly a hundred%, however a less tangible “anything is left”. That is particularly valuable to know, since there are lots of occasions where it’s far immensely useful to both set and not set a width.

The largest ass-biter, I always discover with this is textarea elements, which very a great deal want their widths set to combat the desired “cols”, attribute, and are unable to have child elements. So that you frequently need the textarea to be explicitly set to 100%, but have padding as nicely, pushing it too big to fit. In a static width condition, we frequently depend on pixel widths that fit, however, no such fortunes in liquid width situations.

Absolute Boxes with No Width:

Absolutely positioned boxes that have no width set on them behave a bit strangely. This width is only as wide as it needs to be to keep the content. So if the box contains an individual word, the box is only as wide as that word renders. If it grows to two words, it’ll abound that wide.Absolute Boxes with No Width

This have to continue until the box is a hundred% of the parent’s width (the closest parent with relative positioning, or browser window) after which start to wrap. It feels natural and normal for boxes to increase vertically to deal with content element, but it just feels strange whilst it occurs horizontally. That strange feeling is warranted, as there are plenty of quirks in how exclusive browsers handle this, now not to say just the fact that text renders in another way throughout platforms.

The equal genuine behavior is seen with floating elements with no widths. The box is only as wide as it needs to be to compromise with the content, up to as wide as its parent element (would not need to be relatively positioned though). Due to the fragile nature of those widths-less boxes, the lesson to remove here is to no longer depend on them in the task-important situations, like in the overall page layout. In case you float a column to use as a sidebar and count on a few elements inside (such as an image) to be liable for conserving its width, you are asking for problems.

Inline Elements are Boxes Too:

I have been somewhat concentrating on boxes as as block-level elements here and it’s simple to accept block-level elements as boxes, however inline elements are boxes to. Think of them as absolutely long and skinny rectangles, that just so appear to wrap at every line. They are able to accept margin, padding and borders just like any added box.Inline Elements are Boxes Too

The wrapping is what makes it puzzling. A left margin as apparent above pushes the box to the right as you would suspect, however, only the first line, as that is the starting of the box. Padding is applied above and below the text chooses it ought to be, and once it wraps it neglect the line above its padding and starts wherever the line-height dictates it ought to begin. The background was applied with transparency to see how it works more plainly.

Leave a Reply

Your email address will not be published. Required fields are marked *