Padding

As explained in Web Design Playground, Second Edition

A padding shorthand property is a CSS declaration form that specifies multiple padding side values in one property.

Padding is the whitespace between an element’s content and its border. The padding shorthand property sets padding values in one declaration instead of writing padding-top, padding-right, padding-bottom, and padding-left separately. section 9.1 section 9.7

Use padding to give content room to breathe:

• Choose standard CSS units such as px, em, rem, vw, vh, or percentages. section 9.3
• Write individual side declarations when each side needs a distinct value. section 9.3
• Replace repeated side declarations with one padding shorthand declaration. section 9.3 section 9.7
• Add horizontal padding to navigation items so labels do not run together. section 9.3

A pull quote with four padding values

Write the four side values in one declaration: .pullquote { padding: 1em 1.5em .75em 1.25em; } This duplicates separate top, right, bottom, and left declarations while keeping the rule compact. section 9.3

Figure 9.4 The syntaxes of the padding shorthand property

View the syntax patterns for the padding shorthand property. section 9.3

How Web Design Playground, Second Edition covers it

How deep it goes

Defines padding, lists its units and side properties, demonstrates a four-value shorthand, and stops short of deeper layout theory.

Examples

Demonstrates a pull quote and a horizontal navigation menu with added item spacing.

What it assumes

Assumes basic CSS declarations and teaches the element box, its four parts, and padding terminology from the ground up.

What you can do after

Build it from scratch by writing compact padding declarations for content boxes, pull quotes, and navigation items.

How it connects

Connects padding with the CSS box model, content, border, margin, navigation menus, and responsive web design.

liveBookmanning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Hacking CryptographyA defined method for adding and later removing padding from cryptographic data, potentially incorporating randomness.
• 

  liveBookmanning.com
  Tiny CSS ProjectsA CSS property that sets the space between an element's content and its border on each side.
• 

  liveBookmanning.com
  Learn Generative AI with PyTorchA setting or operation that adds, fills, or ignores boundary or placeholder positions in tensor or sequence data.
• 

  liveBookmanning.com
  CSS in Depth, Second EditionThe CSS shorthand property that specifies the space between an element's content and its border.
• 

  liveBookmanning.com
  Build a Website with ChatGPTThe CSS padding shorthand property sets padding values for multiple sides of an element with one declaration.
• 

  liveBookmanning.com
  Natural Language Processing in Action, Second EditionPadding is the addition of extra positions around an input sequence so boundary regions can be processed and output dimensions controlled.
• 

  liveBookmanning.com
  Math and Architectures of Deep LearningThe treatment of positions where a convolution kernel extends beyond the input array, such as stopping early or pretending missing values are zero.
• 

  liveBookmanning.com
  100 Go Mistakes and How to Avoid ThemPadding is the insertion of extra memory space between data fields to control their placement and alignment.
• 

  liveBookmanning.com
  Grokking AI Algorithms, Second EditionPadding is the addition of extra border values around an input array before an operation is applied.
• 

  liveBookmanning.com
  Software Security for DevelopersPadding is the addition of extra data so that an input conforms to a required fixed block size or cryptographic encoding format.
• 

  liveBookmanning.com
  Deep Learning with R, Third EditionPadding is the addition of rows and columns around an input feature map so convolution windows can cover boundary locations.
• 

  liveBookmanning.com
  Real-World CryptographyPadding is the addition of structured data to an input so it can be divided into required-size blocks while preserving input boundaries.
• 

  liveBookmanning.com
  Deep Learning with Python, Third Edition
• 

  liveBookmanning.com
  Web Design PlaygroundThe inner spacing between an element's content and its border.
• 

  liveBookmanning.com
  LLMs in ProductionPadding is the addition of placeholder elements to sequences so that inputs in a batch share a common length.
• 

  liveBookmanning.com
  Design for DevelopersPadding is the internal space between an element's content and its border or edge.
• 

  liveBookmanning.com
  Modern C, Third EditionByte padding is unused whole-byte storage inserted within or after a structure to satisfy layout or alignment requirements.
• 

  liveBookmanning.com
  Math for Web DesignThe CSS padding property specifies the space between an element's content and its border.

Compare how 19 books explain padding →

Related concepts

• CSS box modelpart of · The CSS box model represents each element as a rectangular box comprising content, padding, border, and margin areas.
• margin propertycontrasts with · The CSS margin property specifies the outer space around an element’s border, separating it from neighboring content.
• style propertykind of · A style property is a named setting or interface attribute that specifies or exposes a presentation characteristic of an element or view.
• PKCS#7 paddingincludes · PKCS#7 padding is a byte-padding scheme in which each appended byte contains the number of padding bytes added to complete a block.
• shorthand propertykind of · A CSS shorthand property sets multiple related longhand properties in a single declaration, resetting omitted properties to their initial values.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.