| In this tutorial I will explain the box model, ie the properties that you can apply to any case and how they work. |
| Many definitions are taken as is or simplified on the recommendation of the W3C Cascading Style Sheets, Level 2 Revision 1 (CSS2.1), and Recommendation of the W3C "HTML 4.01 Specification" that are in Section HTML / CSS this site. |
| The CSS box model describes the rectangular boxes that are generated by the elements in the document structure. Any text or element of our website is contained within a box. These boxes have some properties such as height and width, borders, padding and margins. |
| The following image shows the structure of a box according to CSS, and where they are located each of the components that I mentioned earlier. |
 |
| On the height and width of the box (WIDTH and HEIGHT) I have already spoken in great detail in earlier tutorials. I will only say here that what is initially defined the height and width of the "content", as specified by the W3C (see image above). The remaining properties are outside of these measures. |
| This means that the total width of any element is the result of adding the width of left and right margins, the width of the left and right borders, the width of the paddings left and right, and the width of the content (specified with WIDTH property). |
| Similarly, the height of an element is the result of adding the width of the top and bottom margins, the width of the upper and lower borders, the width of the upper and lower paddings, and the height of the content (specified with the HEIGHT property). |
| |
 MARGIN (MARGIN-TOP, MARGIN-BOTTOM, MARGIN-LEFT, MARGIN-RIGHT)
|
| This property determines the width of the margin of the box. Understand as the margin space between the edge of the box and the elements that surround it. The width of the margins can be set separately to allow the box to a different room on each side, thereby using their derivations for each orientation (margin-top, margin-bottom, margin-left, margin-right). |
| Vertical margins (margin-top and margin-bottom) only have effect on the block elements and on the images, while the lateral margins (margin-left and margin-right) can be applied to any element. |
| The values that can take are: |
|
 Exact value: |
|
Ie, a fixed width. There are many ways to establish the measures in a web. In this case use px, which are pixels, and reflect absolute measurements. |
|
Percentage: |
|
This percentage is calculated with respect to the width of the block that contains the box with which we are working. |
|
Auto: |
|
Look for a margin equivalent to the left and right to leave the box centered with respect to the block or box that contains it (the "Auto" does nothing in the vertical margins). |
| |
|
| NOTE: It is allowed to use negative margin. |
| As an example, to put a 5px top margin of a box that has the identifier, for example, 'recuadro', write in our style sheet: |
| #recuadro {margin-top: 5px;} |
| If we want to make a margin on all sides of the element: |
| #recuadro {margin: 5px;} |
| But we can also put different combinations with the margin property and define it only with the four margins, with different values. Thus, if we put two values: |
| #recuadro {margin: 5px 10px;} |
| the first value is applied to the top and bottom margins, and the second value to the left and right margins. |
| For three values, one to the upper margin, the second for both lateral margins and the third for the bottom margin. |
| |
| IMPORTANT: CLOSED MARGINS |
| Closed margins means that adjoining margins (ie they do not have, including any content empty, paddings or borders) of two or more boxes are combined into one. |
| This situation happens in several situations (see W3C Recommendation on Cascading Style Sheets, Level 2 Revision 1 (CSS2.1)), but the most common, especially when a web layout, is when two adjacent boxes, or father and daughter, at normal flow (ie, relative position). In these cases, the adjacent vertical margins are closed (to be merged into one). |
| |
|
| This may re crazy if we do not have in mind. |
| NOTE: The following examples do not work the same way in IExplorer. IExplorer is a behavior that is not in accordance with the guidelines of the W3C. I will talk about the differences in IExplorer as to margins, borders and paddings in the next tutorial. |
| Take a html file with the following structure: |
 |
| and your stylesheet with this content: |
 |
| In this case, if we execute the code ' EXAMPLE 1 ', The left margin of the box "recuadro" is clearly visible, but the top margin does not appear. This is because in the absence of any element between the box "principal" and the box "recuadro", the top margin (vertical) quits and joins outside the box "principal". As there is none, two boxes moving down 5px. Visually, it appears that the top margin has not had effect, but it has, by moving both boxes, and not the interior, which is what we wanted. |
| For these cases, position the box "recuadro" in absolute terms, or place an border on the main box (if you do not want to wear it, we can always put the same color as the box), so that this behavior would disappear. |
 |
| Changing the Position property, the result is ' EXAMPLE 2' |
| |
PADDING (PADDING-TOP, PADDING-BOTTOM, PADDING-LEFT, PADDING-RIGHT) |
| This property determines the width of the padding of the box. We refer to padding as the space between the contents of the box and the border of it. The width of the padding can be set separately to allow a different box stuffing on each side, thereby using their derivations for each orientation (padding-top, padding-bottom, padding-left, padding-right). |
| The values that can take are: |
|
Exact value: |
|
Ie, a fixed width. |
|
Percentage: |
|
This percentage is calculated with respect to the width of the block that contains the box with which we are working. |
| |
|
| For multiple values of padding, this property works the same way as margin. |
| NOTE: In contrast to the property margin, padding is not allowed to use negative values. |
| NOTE: The color of the padding area is specified via the background property of the box in question. |
| Putting a simple example, if we have the following html file: |
 |
| and the following stylesheet: |
|
| We see, when you run the file ' EXAMPLE 3', that the word "Hola" is located right at the top left of the box that contains it ( "recuadro"). |
| If we change the style sheet as follows, adding a higher pagdding: |
 |
| We see, when you run the file ' EXAMPLE 4', that the word "Hola" was moved down 10 pixels, which is what we specified in the stylesheet with the ruling PADDING-TOP: 10px;. |
| Clearly observe the padding is inside the box (because the space is left on the word "Hola" is colored yellow, the bottom of the box "recuadro") while the margin is outside. |
| |
BORDER-WIDTH (border-top-width, border-bottom-width, border-left-width, border-right-width) |
| This property determines the width of the border of the box. The border is located between the end of the padding area and the beginning of the margin area. As before, the width of the border can be set separately for each side. |
| The values that can take are: |
|
thin: |
|
A thin border |
|
medium: |
|
A medium border |
|
thick: |
|
A thick border |
|
Exact value: |
|
Ie, a fixed width. |
| |
|
| Multiple values for border-width, this property works the same way as margin. |
| |
BORDER-COLOR (border-top-color, border-bottom-color, border-left-color, border-right-color) |
| This property determines the color of the border of the box. |
| The values that can take are: |
|
value: |
|
the keyword that defines a color or a hexadecimal code of 6 characters: maroon #800000, red #ff0000, orange #ffA500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080. |
|
keyword -transparent- |
|
to make the underlying colors seen through. |
| |
|
| Multiple values for border-color, this property works the same way as margin. |
| |
BORDER-STYLE (border-top-style, border-bottom-style, border-left-style, border-right-style) |
| This property determines the style of the line from the border of the box. |
| The values that can take are: |
|
none: |
|
Has no border, the width of the border is zero. |
|
hidden: |
|
Same as' none ', except in terms of settlement of the borders of tables. |
|
dotted: |
|
The border is a series of points. |
|
dashed: |
|
The border is a series of small segments of lines. |
|
solid: |
|
The border is a single line segment. |
|
double: |
|
The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'. |
|
groove: |
|
The border looks as though it were carved in the Canvas. |
|
ridge: |
|
The opposite of 'groove': the border appears to be standing (in relief) of the canvas. |
|
inset: |
|
The border makes the entire box look as if it were embedded (buried) in the canvas. |
|
outset: |
|
The opposite of 'inset': the border makes the entire box look out (in relief) of the canvas. |
| |
|
| Multiple values for border-style, this property works the same way as margin. |
| |
BORDER (BORDER-TOP, BORDER-BOTTOM, BORDER-LEFT, BORDER-RIGHT) |
| This property determines all the properties of short borders, ie the width, color and style of the border of the box. |
| The order of values is as follows: |
|
border-width border-style border-color |
| |
|
| NOTE: In BORDER property you can not define different values for each side of the border of the box. You have to use the specific properties. |
| For example, to define the border of the box "recuadro" as a blue solid style and width of 3 pixels instruction in the stylesheet would be: |
| #recuadro { border: 3px solid blue;} |
Español
English
