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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
CSS Box Model

Last accessed pages

  1. AJAX Course, free Lessons (7411)
  2. AJAX and JSON (1019)
  3. Wake Up! (3449)
  4. Read Excel file data in PHP - PhpExcelReader (63706)
  5. JavaScript Course - Free lessons (15710)

Popular pages this month

  1. Contact page - CoursesWeb (1955)
  2. Tabs effect with CSS (1942)
  3. Insert, Select and Update NULL value in MySQL (1036)
  4. Read Excel file data in PHP - PhpExcelReader (832)
  5. PHP getElementById and getElementsByTagName (513)