Box Model & Positioning

One principle necessary to fully understand HTML and CSS is the box model. The box model concept states that every element on a page is a rectangular box, and may include margins, padding, and borders.

The Box Model

As we know, every element is a rectangular box, of which includes a height and width, and may consist of different margins, padding, and borders. All of these values put together build what is known as the box model.

The box starts with the height and width of an element, which may be determined by the type of element, the contents of the element, or by specified height and width properties. The height and width is then followed by the padding and border. The margin follows the border, however it is not technically included within the actual size of the box. Although it’s not included within the size of the box, the margin does help define the box model.

CSS Height/Width

An element will expand and contract vertically as necessary to accommodate its content. To set a specific height/width for a block level element.

div {
  height: 250px;
  width: 400px;
}

CSS Margin Property

The margin property allows us to set the length of space surrounding an element. Margins fall outside of any border and are completely transparent. Margins can be used to help position elements within a particular place on a page or to simply provide breathing room, keeping all other elements a safe distance away.

div {
   margin: 20px 10px 40px 15px;
}

CSS Padding Property

The padding property is very similar to that of the margin property, however it falls within any elements border. Paddings will also inherit any backgrounds of an element. Padding is used to provide spacing within an element, not for positioning an element like the margin property.

div {
   padding: 30px 15px 10px 20px;
}
Demo of above code
Lorem ipsum Sunt veniam est dolor enim tempor elit in sint amet adipisicing velit non sit officia commodo Excepteur enim dolore ullamco aliqua deserunt esse reprehenderit culpa sint sint anim deserunt.

Creating a Website Layout

HTML5 provides a handful of new elements, all of which are focused around improving semantics. Before, if you wanted to declare a block level section of a page you were likely to use a div. With HTML5 you have a handful of new block level elements that allow you to write more semantic code.

body {
   width: 600px;
}
header {
   width: 600px;
   background: red;
}
nav {
   width: 600px;
   background: blue;
}
section {
  float: left;
  margin: 10px;
  width: 440px;
  height: 200px;
  background: gray;
}
aside {
  float: right;
  margin: 10px;
  width: 120px;
  height: 200px;
  background: green;

}
footer {
  clear: both;
  background: purple;
}

comments powered by Disqus