CSS Height and Width

CSS Height and Width

---

Example

This element has a width of 100%.

Yourself Try

Setting height and width

The height and width properties are utilized to set the height and width of a component.
The height and width can be set to auto (this is default. Implies that the program computes the height and width), or be indicated long qualities, similar to px, cm, and so on., or in percent (%) of the containing square.

This element has a height of 200 pixels and a width of 50%

Example

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;}

Yourself Try

This element has a height of 100 pixels and a width of 500 pixels.

Example

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;}

Yourself Try

Wright © bestwebdesign and Graphics design

Read More

CSS Padding

CSS Padding

---

The CSS padding properties are utilized to create space around a component's substance, within any characterized fringes.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of a component (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

The following example sets different padding for all four sides of a <div> element: 

Example

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;}

Yourself Try

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

So, here is how it works:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

Example

div {
    padding: 25px 50px 75px 100px;}

Yourself Try

If the padding property has three values:

• padding: 25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

Example

div {
    padding: 25px 50px 75px;}

Yourself Try

Wright © bestwebdesign and Graphics design

Read More

CSS Box Model

CSS Box Model

---

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the expression "box show" is utilized when discussing plan and format. 

The CSS box demonstrate is basically a container that folds over each HTML component. It comprises of: margins, borders, padding, and the real substance. The picture beneath delineates the crate demonstrate:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements. 

Example

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;}

Yourself Try

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Assume we want to style a <div> element to have a total width of 350px:

Example

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; }

Yourself Try

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Wright © bestwebdesign and Graphics design

Read More