How to calculate widths for html elements in css

Seven properties that determine width of nonfloating block-level elements are:

  • border-left
  • padding-left
  • width
  • margin-left
  • padding-right
  • border-right
  • margin-right

    For any element, the total of the values must always equal the inherited width. To ensure that total width does not exceed the inherited width, adjustments will be made if necessary to one or more values. CSS1 provides that border and padding values are never adjusted. Only the width, margin-left and margin-right value can be adjusted.

    Meaning of auto depends of the type of element. For images and objects, default width is the built-in width although they may be scaled up or down. For other elements, auto depends of floats and display properties.

    • For floating elements width of auto always means 0.
    • For inline elements width is ignored completely.
    • For block elements width will be calculated using above formula.
    • For inline or floating elements, auto margin-left or margin-right means 0.
    • For block elements, auto margin-left and martin-right means maximum possible.

None of the three values are “auto”

When neither width nor margin-left nor margin-right is set to auto, the right margin is ignored and set to auto. Its value will be adjusted.

body {
width: 30em;
}

p{
width: 25em;
margin-left: 3em;
margin-right: 3em;
}

The width of P will be 25em, margin-left will be 3em and margin-right will be calculated as 30 – 25 – 3 = 2em (assuming no border and padding has been set).

One of the values is “auto”

When only one of width, margin-left, margin-right is set to auto, its value will be calculated.


body {

width: 30em;

}

p {

width: 25em;

margin-left: auto;

margin-right: 3em;

}


The width of P will be 25em, margin-right will be 3em and margin-left will be calculated as 30 – 25 – 3 = 2em (assuming no border and padding has been set).

Two or three of the values are “auto”

If width is set to auto, then the width value is calculated. It will be maximized after the considerations of margin-left and margin-right.

If width is not auto, then both margin-left and margin-right are, then the two margins will be maximized and equal after considering the width value.


body {

width: 30em;

}

p {

width: auto;

margin-left: 5em;

margin-right: auto;

}

Margin-right will be 0, margin-left will be 5em and the width will be calculated as 30 – 5 – 0 = 25em (assuming no border and padding has been set).

body {

width: 30em;

}

p {

width: 25em;

margin-left: auto;

margin-right: auto;
}

Width will be 25em, margin-left and margin-right will be calculated as (30 – 25)/2 = 2.5em each (assuming no border and padding has been set).

Keep in mind that border-left, border-right, padding-left, padding-right values are never adjusted. So a value of auto will be ignored. The width and margins are

adjusted using the provided border and padding if any using the formula

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = available width or the container's width.

Reference: ‘Cascading Style Sheets: Designing for the Web’ 2e by Hakon Wium Lie & Bert Bos, Addison-Wesley

Advertisements