CSS - Hot To Specify the Padding Spaces of a Block Element

Hot To Specify the Padding Spaces of a Block Element

Q

Hot To Specify the Padding Spaces of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

✍: FYIcenter.com

A

CSS offers 4 style properties to control padding spaces of a block element. You can specify them in different ways as shown in the following CSS examples:

{padding-top: 30px} - Specifies the top padding to 30 pixels.
{padding-right: 10px} - Specifies the right padding to 10 pixels.
{padding-bottom: 40px} - Specifies the bottom padding to 40 pixels.
{padding-left: 20px} - Specifies the left padding to 20 pixels.
{padding: 30px 10px 40px 20px;} - Specifies padding spaces on 4 sides: top, right, bottom and left.

When padding spaces are specified, the size of the content box will be reduced to give room to meet the specified padding spaces on 4 sides. The size of the content box can be calculated as:

Content width = "width" - "padding-left" - "padding-right"
Content height = "height" - "padding-top" - "padding-bottom"

2007-05-11, 4521👍, 0💬

What Is a Floating Element
What Is a Floating Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of... 2007-05-11, 4442👍, 0💬

Hot To Specify the Content Box Size of a Block Element
Hot To Specify the Content Box Size of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If you want to control the size of the content box of a block element, you can use the "width" and "height" properties as shown below: {width: 300px} - Specifies the c... 2007-05-11, 4223👍, 0💬

How To Specify Borders of a Block Element
How To Specify Borders of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS offers 12 style properties to control borders of a block element with 3 properties on each side to control border style, width and color. You can specify those 12 border proper... 2007-05-11, 4212👍, 0💬

Hot To Test Padding Spaces on All 4 Sides
Hot To Test Padding Spaces on All 4 Sides? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If you want test padding spaces on 4 sides of a <P> tag, you can use the following HTML and CSS document. It allows you to specify padding spaces with different values and v... 2007-05-11, 4198👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.