Click to read this article

In nutshell: Width & Height can't be applied to inline elements. ** an inline element has complete padding properties but no margin-top/bottom properties, only margin-left/right properties work.

Have you ever tried to add padding to

In the example below, the

Inline elements laid out in rows

To understand why this is happening, we need to look at the different ways that block level and inline elements treat properties such as width, height, padding and margins.

Block level elements The W3C’s CSS2 spec defines block level elements as elements of the source document that are formatted visually as blocks. In other words, block level elements are normally displayed as blocks with line breaks before and afterwards.

Examples of block level elements Element Description

long quotation

push button

table caption

definition description deleted text

generic language/style container

definition list

definition term

form control group

interactive form

heading

heading

heading

heading

heading

heading

---

horizontal rule

fieldset legend

list item

client-side image map

alternate content container for non frame-based rendering

alternate content container for non script-based rendering

generic embedded object

ordered list

paragraph

    preformatted text

    table
    table body
    table footer
    table header
    table row
    unordered list
Inline elements
The W3C’s CSS2 spec defines inline elements as elements of the source document that do not form new blocks of content; the content is distributed in lines. So, inline content is displayed with no line breaks before or afterwards.

Examples of inline elements
Element    Description
    anchor
    abbreviated form
    acronym
    bold text style
    I18N BiDi over-ride
    large text style

    forced line break
    push button
    citation
    computer code fragment
    deleted text
    instance definition
    emphasis
    italic text style

    form control
    inserted text
    text to be entered by the user
    form field label text
    client-side image map
    generic embedded object
    short inline quotation
    sample program output, scripts, etc.
    option selector
    small text style
    generic language/style container
    strong emphasis
    subscript
    superscript

    teletype or monospaced text style
    instance of a variable or program argument
Dimension – a key difference between block and inline elements
If you try to add dimension to an inline element, some properties will be applied, some properties will be partially applied and others will not be applied at all. The most noticable properties are width, height, margin and padding.
Inline elements and width
The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘width’ property does not apply. In the example below, a width of 200px has been applied to the inline  element. As you can see, it has no affect on the surrounding content:

Inline element with width applied
Inline elements and height
The W3C’s CSS2 spec states that for Inline, non-replaced elements, the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property. In the example below, a height of 50px has been applied to the inline  element. As you can see, it has no affect on the surrounding content:

Inline element with height applied
Inline elements and padding
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the  element. As you can see, it has an affect on the content on each side, but not on content above or below:

Inline element with padding applied
Inline elements and margins
Margins operate in the same way as padding on inline elements. In the example below, 50px of margin has been applied to all sides of the  element. While the left and right edges are effected, the content above and below are not:

Changing an element’s “display” property from inline to block
It is possible to change the display property of an inline element to “block”. This will give it a block level appearance without changing it’s actual structure. For example, the  element below has been set to “display: block”. As soon as this occurs, properties like width, height, margin and padding are applied is if it were a block level element.

Inline element set to display block
Changing an element’s “display” property from block level to inline
You can also change block level elements so that they display inline. If an 
 element is set to “display: inline”, width, height, padding and margin will immediately operate as they do for any other inline element. This is what caused the 
 element to ignore top and bottom padding in our original example.

Overcoming padding issues for 
 elements set to “inline”
There are many ways to overcome the padding issue shown above. Here is one:

Step 1
Remove any reference to “display: inline” and allow the 
 elements to return to their natural state – “display: block”. Padding is now applied to all sides of the element, but the elements sit in a vertical stack.


Inline elements set out as blocks
Step 2
Set the 
 element to “float: left” and give it a width – in this case 8em has been used. This will allow the list items to sit beside each other. If there is not enough room for all list items to sit next to each other, those that do not fit will move down and sit below.


adding08


    table data cell

    table header cell