Tag Archives: html

HTML CSS Box Model

Posted on by

last update: November 23, 2014

HTML CSS Box Model

All HTML elements can be considered as boxes. The CSS Box Model is shown in the figure at left.

The width and height properties specified for an element with CSS refers only to the content area. To get the full size of the element, you must also add the padding, the border and the margin.
The different parts are :

Firefox

Padding, border and margin are added to the lengths

  • Margin : transparent area around the border
  • Border : a border around the padding and content with a border color
  • Padding : clears an area around the content with the background color of the box
  • Content : where text and images appear

Padding is the inner space of an element, whereas margin is the outer space of an element. Border is in the middle. The following figures shows the three properties for different browsers :

Firefox - IE9 - Chrome - Safari

Firefox-33 * IE-9 * Chrome-39 * Safari-5.1

In CSS, it is possible to specify different margins for different sides :

margin-top:25px;
margin-right:50px;
margin-bottom:75px;
margin-left:100px;

These margins can also be declared as a shorthand property :

margin:25px 50px 75px 100px;

The values are set clockwise, starting for the top. The same is true for padding. The CSS border properties allow you to specify the style, width and color of an element’s border. The border-style values are :

  • none
  • solid
  • dashed
  • double
  • groove
  • ridge
  • outset

None of the other border properties will have any effect unless the border-style property is set! The border width can be specified in pixels (px) or with the three pre-defined values: thin, medium, or thick.

The shorthand code to set the border is :

border:5px solid red;

The order of the values are : border-width, border-style, border-color.

The following list provides links to websites with additional informations about the CSS Box Model and related topics :

HTML5 : block-level and inline elements

Posted on by

Block-level elements like (<div>, <pre>, <p>, <ul>, <ol>, <li>,… ) take up the entire width of their containing element and the height of the default line-height. They stack up underneath each other, top-to-bottom.

Inline elements like (<img>, <em>, <strong>, <a>, <span>, …) are in-line. They stack up next to each other, left-to-right.

All HTML block-level elements have five spacing properties: height, width, padding, border and margin. In the HTML box-model, the width of padding, border and margin are added to the width of the content area.

Applying float to an element will automatically make it a block-level element.

HTML lists

Posted on by

Ordered list :

The <ol> tag defines an ordered list (with digits or characters). This tag is used together with <li> (the ordered item in the list)

Example :

<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>

Unordered list :

The <ul> tag defines an unordered list (with bullets). This tag is used together with <li> (the ordered item in the list)

Example :

<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

Definition list :

The <dl> tag defines a definition list. This tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).

Example :

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

A useful tutorial about definition lists is available at the website of oneXtrapixel.

!DOCTYPE HTML

Posted on by

The declaration <!DOCTYPE HTML> must be the very first thing in an HTML5 document, before the tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype in HTML 4.01 required a reference to a DTD, because HTML 4.01 was based on SGML. HTML5 is not based on SGML, and does not require a reference to a DTD, but need the doctype for browsers to behave as they should.

HTML5 Test website

Posted on by

screen snap of the test results

A very useful HTML5 test tool has been created by Niels Leenheer. The goal is to show an indication of how well a browser supports the upcoming HTML5 standard and related specifications. The test tool was upgraded in June 2010 (see the blog).

The maximum score of the test is 300 points. The support of one or more codecs provides additional bonus points.

The results for my installed browsers are :

  • Chrome Canari (beta 10.0.614.0) : 244 points + 13 bonus points
  • Chrome 8.0.552.224 : 231 points + 13 bonus points
  • Safari 5.0.3 : 207 points + 7 bonus points
  • Firefox 4 beta 8 : 197 points + 9 bonus points
  • iPod Touch 4 (version 4.2.1  8C148) : 196 points + 7 bonus points
  • Firefox 3.6.13 : 139 points + 4 bonus points (no H264 support)
  • IE 9.0.7930 : 96 points + 5 bonus points
  • IE 8.0.6001 : 27 points, no bonus points
  • BlackBerry Bold 9000 (version 4.6.0.126) : 14 points, no bonus points

Niels Leenheer stated on his blog that there are problems with the HTML5 video codec detection in most browsers. Safari and Chrome report an answer “probably” with the javascript  canPlayType() command even if the codec indicated is a dummy. I experienced the same behavior in my test environment. Today it’s not possible to check what profile is supported in browsers implementing the MIME video/mp4.

The Web Standards Project’s operates also a test website called Acid Tests site.

W3C provides the mobileOK Checker (version 1.4.2). This work is part of the MobiWeb 2.0 project supported by the European Union’s 7th Research Framework Programme (FP7). The checker is based on the open source mobileOK checker library developed by the Mobile Web Best Practices working group.

The Wilderness Downtown by Chris MILK and Arcade Fire

Posted on by

The Wilderness Downtown is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and was built entirely with the latest open web technologies, including HTML5 video, audio, and canvas.

Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering… this Chrome Experiment uses all of them.

The Wilderness Downtown is an outstanding browser-dominating Net Artwork. This experimental, interactive film by Chris Milk, is a lovely visual poem to accompany Arcade Fire’s excellent “We Used To Wait” from their album The Suburbs.

This Chrome Experiment has been done with some of Chris Milk’s friends from Google, among them the technology director Aaron Koblin.