CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

Css Box Model

Introduction

The Box Model property of CSS is used for design and layout of an html page. In CSS, all the elements has a rectangular box around it, you have to understand that to align the elements or to create layouts.

CSS Box Model is an area around the item which has various assets such as padding, margin and border. It acts as a set of tools to customize the design of various elements.

Width and Height of the element:

The width and height of an html element may vary according to the different browsers, thus you need to study the box model to understand how to assign values to the width and the height.

Note that when you set width and height of an element using CSS, it just sets the width and height of the content area. To personalize the element completely, padding, borders and margins must be used.

CSS Box Model

The CSS Box Model consists of following properties:

  • Border
  • Margin
  • Padding
  • Content

Note: When the padding or border values are not declared, they are either zero (css reset) or the default value of browser.

  • Border box:
    This is the region around the content, between the margin and padding of the box. When the standard box model is used, size of border is assigned to width and height of the box.
    There are a large number of properties of border for border styling. Also there are four borders and you can manipulate the color, style and width of each border.
    To set the color, style and width of all four border at once you can use border property.

Following are the properties to set each side of the border individually:

  • border-top
  • border-right
  • border-bottom
  • border-left

Following are the properties used to set color, style and width of all sides of the border:

  • border-color
  • border-style
  • border-width

It is also possible to set the width, style or color of single side using the following longhand properties:

  • border- <side> -width
  • border- <side> -style
  • border- <side> -color

Where the <side> may be top, right, bottom or left.

Example:

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
 .container{
font-size: 25px;
font-family: arial;
width: 500px;
height: 500px;
}
.box{
margin: 30px 20px;
height: 60px;
/*to set the width, style and color of all sides of the border*/
border: 12px solid skyblue;
border-right-width: 30px;  /*to set the width of right side*/
border-bottom-color: hotpink; /*to set the color of bottom side*/
border-top: 4px dotted skyblue;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
<center>CSS Box Model : Border</center>
</div>
</div>
</body>
</html>

Output:



CSS Box Model

Here, different properties of border box are used to display the border.

  • Margin box:
    It represents the outermost layer outside of the border. It is a transparent area around the box which lies between the border and the boundary of the window.
    The values of the margin can be positive and negative. When you set the margin as negative, one side of the box overlaps other elements on the page.
    To manipulate the margin of an element, you can use margin property. It changes the margin of all sides at once. And to change the margin of each side individually, you can use following longhand properties:

    • margin-top
    • margin-right
    • margin-bottom
    • margin-left

Example:

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.container {
font-size: 25px;
font-family: arial;
width: 500px;
height: 300px;
border: 5px solid;
}
.box {
height: 60px;
border: 15px solid skyblue;
margin-top: 60px;
margin-right: -30px; /*negative value overlaps the outside border element*/
margin-bottom: 20px;
margin-left: 40px;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
<center>CSS Box Model : Margin</center>
</div>
</div>
</body>
</html>

Output:

CSS Box Model

Here, all the longhand properties of margin are used with different values. As we have given a negative value to the margin-right property, it overlaps the other element to its right.

  • Padding box:
    Padding is the space between the content area and the border box. To decide the proportions of the padding box, its height and width needs to be specified.
    Padding does not accept negative values like margins, so you should assign either zero or positive value to it. The main aim of using padding is to keep the content away from border with a particular distance provided.
    To manipulate the padding of an element, you can use padding property which changes the padding of all sides at once. And to change the margin of each side individually, you can use the following long hand properties:

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

Example:

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.container {
font-size: 25px;
font-family: arial; 
width: 500px;
height: 300px;
margin-top: 40px; 
margin-left: 40px;
}
.box {  
height: 60px;
border: 15px solid skyblue;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 80px;
padding-left: 0;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
        CSS Box Model : Padding
</div>
</div>
</body>
</html>

Output:

CSS Box Model

In the above output, all the longhand properties of padding are used with different values. The left-padding is set to 0, so there is no space between the left side of the border and the content.

  • Content box:
    Content box is the area which displays the content of the page. It may be an image, text, or other media. The size of the content can be manipulated using properties like width and height.

Example:

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.container {
font-size: 25px;
font-family: arial; 
margin: 20px 20px20px20px;
width: 400px;
height: 300px;
border: 5px brown dotted;
}
.box {
height: 100px;
border: 15px solid skyblue;
margin: 60px 30px 30px 60px;
padding-top: 0;
padding-left: 20px;
}
</style>
</head>
<body>
<div class = "container">
<div class="box">
This is the content box of CSS Box Model</div>
</div>
</body>
</html>

Output:

CSS Box Model

Above output displays all the properties of Box Model i.e margin, padding, border and content.

To calculate the size of the box on a web page we use:

Size Properties
Width height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
Height width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

In this way, we have learnt the CSS Box Model and its various properties to manipulate the design and layout of an html page.



ADVERTISEMENT
ADVERTISEMENT