Indents

padding: number

Sets the internal padding on all sides of the container. The width and height properties include the padding specified by padding.

number — a uniform padding for all four sides.

[ number, number ] — different paddings for vertical and horizontal sides of the container. The first element of the array specifies the vertical padding, and the second specifies the horizontal padding.

[ number, number, number ] — different paddings for the top, bottom, and horizontal sides of the container. The first element of the array specifies the top padding, the second specifies the horizontal padding, and the last specifies the bottom padding.

[ number, number, number, number ] — different paddings for all four sides. The first element of the array specifies the top padding, the second specifies the right padding, the third specifies the bottom padding, and the last specifies the left padding.

In the examples provided, width = 150 and height = 100 are set for each of the containers. The area available for placing content has different sizes in each of the containers since width and height include the padding specified by padding.

paddingVertical, paddingHorizontal: number

Sets the internal padding vertically or horizontally for the container. Takes precedence over padding.

paddingTop, paddingRight, paddingBottom, paddingLeft: number

Sets the internal padding. One property for one padding. Takes precedence over padding, paddingVertical, and paddingHorizontal.

margin: number

Sets the external margins on all sides of the element. Can take a negative value. The width and height properties do not include the margins specified by margin.

number — a uniform margin for all four sides.

[ number, number ] — different margins for vertical and horizontal sides of the block. The first element of the array specifies the vertical margins, and the second specifies the horizontal margins.

[ number, number, number ] — different margins for the top, bottom, and horizontal sides of the block. The first element of the array specifies the top margin, the second specifies the horizontal margin, and the last specifies the bottom margin.

[ number, number, number, number ] — different margins for all four sides. The first element of the array specifies the top margin, the second specifies the right margin, the third specifies the bottom margin, and the last specifies the left margin.

In the examples provided, width = 100 and height = 60 are set for each of the blocks. The area available for placing content remains unchanged since width and height do not include the margins specified by margin.

A negative margin allows elements to overlap each other by shifting the margins inward.

marginVertical, marginHorizontal: number

Sets the external margins vertically or horizontally for the element. Takes precedence over margin. Can take a negative value. See margin for examples of negative margins. The width and height properties do not include the margins specified by margin.

marginTop, marginRight, marginBottom, marginLeft: number

Sets the external margins. One property for one margin. Takes precedence over margin, marginVertical, and marginHorizontal. Can take a negative value. The width and height properties do not include the margins specified by margin. See margin for examples of negative margins.