Hey! Another interesting post about how to simply design a webpage. In this post we will have quick view on what is web design and how to well design our website. But web design is a specific skill when you build your website sometimes or very often we need to hire a web designer to help us to figure it out a great design.

Building with Box-Model

Html elements on a webpage can be put inside div elements. Div element are like rectangular boxes with four layers: content, padding, borders and margins.

Box-Model

Padding: generate space between the content and the borders of elements.

Border: refer to the element border as we see in the previous article

Margin: generate space between webpage elements.

Web Designer always play with these properties : padding, border, and margin to figure out a good design.

Padding

H1 { 

  Border: solid 2 px black;
  Padding: 50px;
  Background-color: lavender;
  
}
// To change the padding on left side of an element we use the padding-left property.

.leftwing { 

  Padding-left: 200px;
  Background-color: crimson;

}

// To change the padding on the right side of an element we use 
//the padding-right property.

  .rightwing {

      Padding-right: 200px;
      Background-color: lightBlue;
      
   }

// To change the padding a the top of an element we use padding-top

   .lightObject { 

      padding-top: 20px;

  }

// To change the padding at the bottom of an element we use padding-bottom 

   .lightObject { 

    Padding-top: 20px;
    Padding-bottom: 60px;

  }

Margin

Generate space around an element outside of any paddings and borders. To change the margins on all four sides of an element, we use the margin property.

img {  

  margin: 30px;
  border: 3px solid red;

 }

// To change the margin at the top and the of an element, we use the margin-top and margin-bottom property.

 img {

  margin-top: 20px;
  margin-bottom: 100px;
  border: solid 3px;

  }

// To change the margin on the left and right side of an element
// We use the margin-left and margin-right property.

 img {

  border: solid 3px;
  margin-left: 20px;
  margin-right: 100px;
 
  }

We can add padding with one line . So far we have learned padding for each side of an element, we can set each padding value in one line, using the padding property and a pixel value for each side.

// padding in four line

img {

 Border: solid 2px black;
 Padding-left: 20px;
 Padding-right: 30px;
 Padding-top: 40px;
 Padding-bottom: 30px;

  }

// padding in one line Padding: top right bottom left;

img {

   Border: solid 2px black;
   Padding: 20px 30px 40px 30px;

   }

When we don’t want to add padding to one side we add 0 and leave out px since it’s optiomal.