Box Model Demo

Each element has some content, then the space around content is defined in terms of:

• Padding (the space between the content and the border)
• Border (the line around the content and padding)
• Margin (the space between the border and the surrounding elements)

This is illustrated in this diagram from the CSS specification. CSS stands for Cascading Style Sheets, style sheets are used to format all the visual aspects of a web page.

The padding, border and margin can be broken down into top, right, bottom and left segments, illustrated in the diagram. (I.e. TP for top padding, RB for right border, BM for bottom margin, LB for left border, etc.) This is know as the Box Model. All the parts of the Box Model can be formatted with CSS.

Box Model Browser Defaults

A simple HTML page can be used to see the Box Model in action. Create a HTML page with an image (e.g. save the Mona Lisa picture below).

Add a red border to the image and some text with a blue border, the borders are added using inline CSS. (On Windows this file can be created in Notepad, or use Notepad++ which adds helpful text color coding when editing an HTML file).

   
Mona Lisa
 

The above example code shows that the image element, , is an inline element (the border is local to the element) and the paragraph,

is a block element (the border is the width of the web page).

Margin Space

Notice the white space between the edge of the browser window and the red and blue borders. This is not the result of a default margin setting on the elements, but on the element of the HTML document. This can be removed by setting the body’s margin to zero, style=»margin:0;» . The white space between the two elements is the result of a default margin on the paragraph element. To get the paragraph element’s border to wrap just the content, and not extend to the width of the page, the width of the

element can be restricted (for example using a style such as width:100px; , or by wrapping the text in a and setting the border on that):

   
Mona Lisa
 

The remaining small white space between the two borders is reserved for text descenders ( is an inline element so text can be next to it and space is saved below a line for letters like ‘g’ and ‘p’). To completely remove the space set the image display as a block (using style display:block; ) or wrap it in a with a height style set to the image height (plus allowances for padding and border settings).

Make All Browser Elements Boxes the Same

There are some small differences on how default settings for the HTML elements box model, as well as other HTML aspects, are displayed between browsers. The differences depend upon:

• Different browser makers: IE and Edge from Microsoft; Chrome from Google; Firefox from Mozilla; Safari from Apple; and Opera
• Browser versions
• Operating systems and versions
• Mobile browsers v desktop browsers

The display differences can be catered for by using easily available style sheets. Otherwise the alternative is to try and figure out the work arounds required for the default settings for the various browsers yourself. Example stylesheets include Reset CSS, HTML5 Reset (derived from Reset CSS), normalize.css, and YUI CSS Reset. Either add a reset style sheet to your web site or link to one on a Content Delivery Network (CDN), e.g.:

     
Mona Lisa
 

These reset style sheets are more controlled than the Universal Reset method, which uses the global * selector: * . Choose the reset method best suited for your designs, here is how three of the reset style sheet methods affect our simple web page.

Reset CSS

YUI Reset

normalize.css

All Together Now

This example illustrates some of the padding, border and margin settings all together. The page background is set to pink ( fuchsia ). The background for image and paragraph span is yellow . They are surrounded by a (with border and background color set to black and white for the image, and green and silver for the paragraph).

      
 
 
Mona Lisa
 
  

This illustrates how the padding shows the background color and how margin is transparent (note borders can be set transparent ). To set different size sides for padding and margin add a hypen and the word top, right, bottom or left, as in margin-left:10px; or padding-bottom:10px; . There is also the shorthand of following padding or margin with one to four numbers to represent the top, right, bottom, left values, for example:

p < margin: 2em >/* margins set to 2em */ p < margin: 1px 5px >/* top,bottom to 1px, right, left = 5px */ p < margin: 1em 3em 3em >/* top to 1em, right to 3em, bottom to 3em, left to 3em (same as right) */ p < margin: 5px 10px 10px 20px >/* top to 5px, right to 10px, bottom to 10px, left to 20px */ /* Below is the same as one immediately above */ p

When using the numbers remember the order by using hands on a clock moving in a clockwise direction (top, right, bottom, left). Individual border edge widths can be set in a similar way using border-top-width, border-right-width, border-bottom-width, border-left-width, likewise for color: border-top-color, border-right-color, border-bottom-color, border-left-color.

Read more about the Box Model, padding, borders and margins in the CSS specification, including settings not covered here. There is an article at http://learn.shayhowe.com/html-css/opening-the-box-model/ which provides additional detail and covers positioning. Some of the demo code can be seen in action on the Box Model Demo HTML page.

See Also

• For more HTML articles see HTML in the index.
• For a full list of all the articles in Tek Eye see the full site alphabetical Index.

Abbreviations

• HTML – HyperText Mark-up Language
• CSS – Cascading Style Sheets
• CDN – Content Delivery Network

Acknowledgements

Author: Daniel S. Fowler Published: 2013-01-28 Updated: 2017-06-11

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Free Android Projects and Samples:

Источник

The Box Model: Padding, Border, Margin

The CSS box model is a very important concept to grasp. The box model is a way to describe the layout of an element and its content. The most important CSS properties we will go over are padding, border, and margin.

Here is a nice diagram of the CSS box model: Diagram of the CSS Box Model. Notice the content inside padding, inside border, inside margin?

Content

You can consider every HTML element as just a box. Inside that box, basically everything in between tags, is considered content.

Width and Height

You can give an element with content a custom width and height by using the width and height CSS properties.

Using width and height in CSS.

The background color was added so that you can clearly see the boundaries of the newly-expanded element. The width and height were set to 20rem and 10rem respectively.

Minimum Width and Height

Give an element a minimum width and height using min-width and min-height to ensure that the element is at least a certain size. Here’s an example:

    .content  
   

Using minimum width and height in CSS.

Notice how even though we set the width and height to be 20rem and 10rem respectively, the element is still larger because the minimum values we gave to the width and height exceed those values.

Maximum Width and Height

Setting the maximum width and height of an element is just as easy as setting the minimum. Use max-width and max-height and give it a value. Here’s an example:

    .content  
   

Using maximum width and height in CSS.

As you would expect, the element does not get larger than the specified maximum, even if another CSS rule sets it higher.

Padding

Padding is space added between the content and the border of its own box. You can declare it using the padding property, and giving it a length.

    div < background-color: lightblue; >.no-padding < padding: 0; >.some-padding  
 
 
  

Example of padding.

As the image shows, the element that got some padding appears larger than the element that got zero padding. The blue background helps to illustrate where the element’s borders are.

You can also set padding on each side individually, by using padding-top , padding-right , padding-bottom , or padding-left .

Border

At the edge of the content plus the padding you defined is the start of the element’s border. By default, an element will not have a border, but you can define one with the border property.

The syntax for it is the width or thickness of the border, the style, and then the color.

For example, if you wanted a blue, dashed, 2 pixels thick border, it would look like this:

Example of a border.

• solid
• dotted
• dashed
• double
• inset
• outset
• groove
• ridge

Borders can be applied to most elements.

Border Radius

One way you can customize borders is by setting a border radius. You can round off the borders of your element using border-radius , like this:

    .rounded-corners  
  

Example of a border radius.

The value for this property is any length of your choosing. The default value is 0 , which means that the border will not be rounded. You can also use 50% to round off the border fully.

Box Shadow

You can add a shadow to an element by using the box-shadow property. The syntax is the same as for borders, but you can also use inset and outset to make the shadow appear inside or outside of the element.

For the most common uses of this property, it takes five values, the horizontal offset, the vertical offset, the blur radius, the size of the shadow and finally, the color. The color is optional, and if you don’t specify it, the shadow will be black . Here’s an example:

Example of a box shadow.

Box shadows can be applied to most elements.

Margin

To add space around an element, you can use the margin property. It takes a length and can be applied to all four sides of the element. Unlike padding, which was spacing inside the element’s border, margin is spacing outside the element’s border, and you declare it using margin .

    span < background-color: green; padding: 0.5rem; border-radius: 0.25rem; display: inline-block; >.low-space < margin-left: 1rem; >.med-space < margin-left: 5rem; >.high-space    

Example of margin.

While a difficult concept to illustrate, it should be clear to see that the more margin on the left side of the element, the further away it goes, despite the fact that all the elements have the same amount of padding.

This is because, again, padding affects only inside the element’s border while margin affects what is outside it.

As with padding , you can alternatively set margin on each side individually, by using margin-top , margin-right , margin-bottom , or margin-left .

Box Sizing

The box-sizing property exists to allow you to control how an element’s width and height is calculated. It only has two values so this one is pretty simple to demonstration.

The first value is content-box . This is the default value. This value makes it so that the width and height is only determined by the content itself. Any padding or border is extra and makes the element bigger.

The second value is border-box . This does the opposite effect. All additional padding and border are now included in the width and height. This means that if you constrain an element to a specific size, any added padding and border will simply make the remaining content space smaller to maintain that overall total size. This is useful for things like making a div that is always the same size, but has a different content inside.

Let’s look at a simple example of the same box with two different sizes because of different box-sizing values for this HTML:

Example of the difference in box sizing.

Because the red square applies the padding and border on top of it’s normal width and height, it appears way bigger than the blue square who keeps itself at 5rem for its width and height no matter what. This is because the blue square is using border-box and the red square is using content-box .

Resources

Give feedback on this page , tweet at us, or join our Discord !

Источник