Web Basic 101 – Block Model

Welcome to the ninth blog on CSS and HTML, in this lesson we will take look at the block model. It’s the different spacing method between each element called the margin and padding. We will also take a look at borders and absolute positioning.

Let’s start with the margin and padding. Those two properties will instruct the browser on how to space each element. Let’s start with a simple graphic to display each element of a single object:

Looking at this image, we can deduct that the padding is the space between the object and the border and the margin is the space between the border and the other objects in the DOM (Document Object Model). We can define the padding or margin one side at the time as follow:

margin-left :15px;
margin-top :15px;
martin-bottom:15px;
margin-right:15px;
padding-left:15px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;

Or in CSS, you can assign the same value to all four sides at once:

margin :15px;
padding :15px;

Finally, the most common and practical way of defining the padding or margin (and even the border) if by specifying each side on one line:

margin : 5px 7px 8px 9px;
padding :10px 11px 12px 13px;

When writing 4 values on one line, the first one will always be the top value, and we turn clock wise (Top, right, bottom, left).

Borders

Let’s continue with borders. The border property will let us delimit one object from another while adding a visual effect at the same time. The border will have a lot of different properties; you can change the color, width, radius and style of each side separately. Here is a semi-3D object example:

.bouton {
  background-color :# ebebeb;
  border-width :1px 2px 2px 1px;
  border-style :solid;
  border-color :#cccccc #666666 #666666 #cccccc;
  border-radius:10px;
}

You may have notice, on some property I’ve listed all four elements and on other, I’ve place a global value (border-radius).

Absolute position

The last part we will see in this course is the absolute position. An object with an absolute position cans be place precisely where we need it to be in relation with his parent element (Only if the position value of the parent element is also defined). In order to place an absolute object you must define a minimum of 4 properties, the height, the width, top and left property. The width and height are self-explanatory; they tell the browser what size the element is. The top and left property will advise the browser where the upper left corner of the object should be in relation to its parent element.

Let’s add our absolute positioning to our button:

.bouton {
  position:absolute;
  width:200px;
  height:30px;
  top:200px;
  left:300px;

  background-color :# ebebeb;
  border-width :1px 2px 2px 1px;
  border-style :solid;
  border-color :#cccccc #666666 #666666 #cccccc;
  border-radius:10px 10px 5px 5px;
}

Now, let’s add a paragraph inside our button:

<div class="bouton">
  <p>my bouton</p>
</div>

At this point we need to place some space between the paragraph and the button; we can either add padding on our button or margin on our paragraph! Here is the code for adding the padding on the button class:

.bouton {
  background-color :#ebebeb;
  border-width :1px 2px 2px 1px;
  border-style :solid;
  border-color :#cccccc #666666 #666666 #cccccc;
  border-radius:10px 10px 5px 5px;
  position:absolute;
  width:200px;
  height:30px;
  top:200px;
  left:600px;
  padding:5px;
}

And here is the code if we want to add a margin on the paragraph:

.bouton {
  background-color :#ebebeb;
  border-width :1px 2px 2px 1px;
  border-style :solid;
  border-color :#cccccc #666666 #666666 #cccccc;
  border-radius:10px 10px 5px 5px;
  position:absolute;
  width:200px;
  height:30px;
  top:200px;
  left:600px;
}
.bouton p {
  margin :5px
}

You should try out both methods since there a slight difference between adding margin and padding. When adding padding to an element, you will increase the size of this element. For example, adding a 5px padding our button will increase the width and height of the button of 10 pixels.

Now all that’s left id to grab yourself a good web hosting package with us!

Here’s the video course :