Community Post

CSS - Specifying Box Dimensions

austinvernsonger
👁️ 0 views
💬 comments

The width and height of a block element is calculated automatically by the browser (thus the default auto value). It will be as wide as the browser window or other containing block element, and as tall as necessary to fit the content. However, you can use the width and height properties to make the content area of an element a specific width or height.

Unfortunately, setting box dimensions is not as simple as just dropping those properties in your style sheet. You have to know exactly which part of the element box you are sizing.

CSS3 provides two ways to specify the size of an element. The default method— introduced way back in CSS1—applies the width and height values to the content box. That means that the resulting size of the element will be the dimensions you specify plus the amount of padding and borders that have been added to the element. The other method—introduced as part of the new box-sizing property in CSS3—applies the width and height values to the border box, which includes the content, padding, and border. With this method, the resulting visible element box, including padding and borders, will be exactly the dimensions you specify. Some find this a more intuitive method for sizing. We are going to get familiar with both methods in this section.

Regardless of the method you choose, you can only specify the width and height for block-level elements and non-text inline elements such as images. The width and height properties do not apply to inline text elements and will be ignored by the browser. In other words, you cannot specify the width and height of an anchor or strong element.

box-sizing

Values: content-box | border-box

Default: content-box

Applies to: all elements

Inherits: no

width

Values: length measurement | percentage | auto | inherit

Default: auto

Applies to: block-level elements and replaced inline elements (such as images)

Inherits: no

height

Values: length measurement | percentage | auto | inherit

Default: auto

Applies to: block-level elements and replaced inline elements (such as images)

Inherits: no

Visit me at github