The box-model is a box that wraps around HTML elements, and it consists of: margins, borders, padding, the height and width of the element and its content.
In the standard box model (content-box), the padding, borders, and margins of an element are added to the width and height of that element to determine the space it occupies in the layout.
- The image below shows the box model.

box model

width and height

The width and the height properties define the width and height of the content area of an element.

- Values: - Syntax:
selector { width: value; height: value; }
Example:
<style>
#idd {
width: 250px;
height: 100px;
background-color: #a7fea8;
}
</style>

<h4>Example width and height</h4>
<div id='idd'>Web site: https://CoursesWeb.net</div>

margin

The margin property sets the four margins surrounding an element. Each side may take one of the following property values:
- Values: It is possible to use negative values, to overlap content.
- Syntax:
selector { margin: top_val right_val bottom_val left_val; }
If you specify all four values in the same definition, they represent the margins of the element in the following order: top, right, bottom and left.
If you specify only one value, it will be applied to all four directions.
In the cases of two or three values specified, the missing values are copied from opposite defined edges.
Example:
<style>
#idd {
margin: 10px 20px 5px 30px;
background-color: #a7fea8;
}
</style>

<h4>Example margin</h4>
 <div id='idd'>Another Web site: https://marplo.net</div>
It is possible to set the margin value for one side only, without affect the other margins.
So, if you want to specify different margins for different sides, you can use each of the fallowing properties:
margin-top, margin-bottom, margin-left, margin-right
With the same values as for the margin property, as you can see in the examples below.
margin-top: 15px;
margin-bottom: 10px;
margin-right: 40px;
margin-left: 40px;

/* Echivalent with */
margin: 15px 40px 10px 40px;
Other example:
margin: 10px 35px;

/* Echivalent with */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 35px;

When margins from two elements contact each other on a page, they 'collapse' into one another. The margin between each element is the size of the largest of the two margin properties.
For example, if there is an <h3> with a bottom margin of 25 pixels followed by a paragraph with a top margin of 10 pixels, the space between the two elements will be 25 pixels, not 35.


padding

The padding property sets the space between the element border and the element content area.
Each side may take one of the following values:
- Values: It is possible to use negative values too.
- Syntax:
selector { padding: top_val right_val bottom_val left_val; }
If you specify all four values in the same definition, they set the padding of the element in the following order: top, right, bottom and left.
If you specify only one value, it will be applied to all four directions.
In the cases of two or three values specified, the missing values are copied from opposite edges.
Example:
<style>
#idd {
padding: 20px 30px 15px 40px;
background-color: #a7fea8;
}
</style>

<h4>Example padding</h4>
<div id='idd'>Free online CSS lessons.</div>
It is possible to set the padding value for one side only, without affect the other sides, using each of the fallowing properties:
padding-top, padding-bottom, padding-left, padding-right
With the same values as for the padding property, as you can see in the examples below.
padding-top: 15px;
padding-bottom: 10px;
padding-right: 30px;
padding-left: 30px;

/* Echivalent with */
padding: 15px 30px 10px 30px;
Other example:
padding: 10px 25px;

/* Echivalent with */
padding-top: 10px;
padding-bottom: 10px;
padding-right: 25px;
padding-left: 25px;

overflow

The overflow defines what is done if the content in a box is too big for its defined space.
- Values: - Syntax:
selector { overflow: value; }
The overflow behavior for the width and the height of a box can be individually set with the overflow-x and overflow-y properties.

Example:
<style>
#idp {
width: 200px;
height: 90px;
background-color: #a7fea8;
overflow: auto;
}
</style>

<h4>Example overflow</h4>
 <p id='idp'>Content with multiple lines of text<br><br>
 In a paragraph that uses<br><br>
 The 'overflow' CSS property.<br>
 End of the text content.</p>

Min and Max dimensions

With Min and Max you can place restrictions on the size of elements.
For example, if you set max-width or /and max-height to an element, will have the initial dimensions but when you add more content, this element will not overcome the dimensions set with these properties.
Similar, the min-height and min-width properties sets the minimum height and the minimum width of an element.
- Values: Example:
<style>
#idd {
background:#bebefe;
height:80%;
min-height: 90px;
max-height: 190px;
width:75%;
min-width: 150px;
max-width: 300px;
}
</style>

<h4>Example </h4>
<p>We set a Div with height 80% but minimum 90px and no more than 190px, and width 75% but no less than 150px and no more than 300px.</p>
<div id='idd'>To be is important, not to do or to have.<br>
 - Be Happy!</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
CSS Box Model

Last accessed pages

  1. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (44471)
  2. Get the value of the selected /checked checkboxes in a form (40325)
  3. createElement and insertBefore (5902)
  4. Insert, Select and Update NULL value in MySQL (36876)
  5. Create simple Website with PHP (22297)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2413)
  2. Contact page - CoursesWeb (2332)
  3. Tabs effect with CSS (2323)
  4. Insert, Select and Update NULL value in MySQL (1314)
  5. PHP getElementById and getElementsByTagName (903)