Boxes
Box Dimensions( width, height)
By default a box is sized just big enough to hold its contents. To set your own dimensions for a box you can use the height and width properties.
The most popular ways to specify the size of a box are to use pixels, percentages, or ems. Traditionally, pixels have been the most popular method because they allow designers to accurately control their size.
When you use percentages, the size of the box is relative to the size of the browser window or, if the box is encased within another box, it is a percentage of the size of the containing box.
When you use ems, the size of the box is based on the size of text within it. Designers have recently started to use percentages and ems more for measurements as they try to create designs that are flexible across devices which have different-sized screens.
Limiting Width (min-width, max-width)
Some page designs expand and shrink to fit the size of the user’s screen. In such designs, the min-width property specifies the smallest size a box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide.
Limitig Height (min-height, max-height)
In the same way that you might want to limit the width of a box on a page, you may also want to limit the height of it. This is achieved using the min-height and max-height properties.
Overflowing Content
overflow
The overflow property tells the browser what to do if the content contained within a box is larger than the box itself. It can have one of two values:
hidden: This property simply hides any extra content that does not fit in the box.
scroll: This property adds a scrollbar to the box so that users can scroll to see the missing content.
Border, Margin & Padding
Every box has three available properties that can be adjusted to control its appearance:
Border Width (border-width)
The border-width property is used to control the width of a border. The value of this property can either be given in pixels or using one of the following values:
-
thin
-
medium
-
thick
####(You cannot use percentages with this property.)
You can control the individual size of borders using four separate properties:
-
border-top-width
-
border-right-width
-
border-bottom-width
-
border-left-width
You can also specify different widths for the four border values in one property, like so:
border-width: 2px 1px 1px 2px;
The values here appear in clockwise order: top, right, bottom, left.
Border Style (border-style)
You can control the style of a border using the border-style property. This property can take the following values:
- solid a single solid line
-[x] dotted a series of square dots (if your border is 2px wide, then the dots are 2px squared with a 2px gap between each dot)
-
dashed a series of short lines
-
double two solid lines (the value of the border-width property creates the sum of the two lines)
-
groove appears to be carved into the page
-
ridge appears to stick out from the page
-
inset appears embedded into the page
-[x] outset looks like it is coming out of the screen
-[x] hidden / none no border is shown
You can individually change the styles of different borders using: border-top-style, border-left-style, border-right-style, border-bottom-style
Border Color (border-color)
You can specify the color of a border using either RGB values, hex codes or CSS color names.
It is possible to individually control the colors of the borders on different sides of a box using: border-top-color, border-right-color, border-bottom-color, border-left-color
The border property allows you to specify the width, style and color of a border in one property (and the values should be coded in that specific order).
padding
The padding property allows you to specify how much space should appear between the content of an element and its border.
The value of this property is most often specified in pixels (although it is also possible to use percentages or ems).
You can specify different values for each side of a box using: padding-top, padding-right, padding-bottom, padding-left
