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.
width and height
The width and the height properties define the width and height of the content area of an element.
- auto - The width /height will be calculated by the browser (default).
- length - A fixed dimension (px, em, cm).
- percentage - Defines the width /height in percent (%) of the containing block.
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
Themargin property sets the four margins surrounding an element. Each side may take one of the following property values:- Values:
- auto - The margin will be calculated by the browse.
- length - A fixed dimension (px, em, cm). Default is 0px.
- percentage - The margins will be a percentage (%) of the containing block's width.
- 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>
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
Thepadding property sets the space between the element border and the element content area.Each side may take one of the following values:
- Values:
- length - A fixed dimension (px, em, cm). Default is 0px.
- percentage - The padding will be a percentage (%) of the containing block's width.
- 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>
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
Theoverflow defines what is done if the content in a box is too big for its defined space.- Values:
- auto - Clips the content and draws scrollbars only when they are needed.
- visible - Shows the content outside of the box (default).
- hidden - Clips the content and hides what falls outside the dimensions of the box.
- scroll - Clips the content and always draws scrollbars to allow for access to additional content.
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:
- length - A fixed dimension (px, em, cm).
- percentage - Defines the dimensions in percent (%) of the containing block.
<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>
<<-Backgrounds -- CSS Border->>