---
title: "Units"
description: "The Pro Units control pairs a number with a unit such as px, %, em or rem, for padding, margins, widths and font sizes. The list of units is editable."
url: "https://www.lazyblocks.com/docs/blocks-controls/units/"
lastUpdated: 2026-09-23
source: "blocks-controls/units.mdx"
---
# Units [Pro]

Units control combines a numeric input with unit selection (px, %, em, etc.), perfect for spacing, sizes, and other CSS measurements.

## Control Settings

- **Units** (`units`) - the units offered in the control's dropdown. The default list is `px`, `%`, `em`, `rem`, `vw` and `vh`

The field is a tag input. Type a unit and press Enter to add it. Whatever tags the field holds replace the default list outright rather than adding to it, and emptying the field leaves the control with no units at all.

## Usage Examples

### CSS Inline Styles

```php title="PHP" /$attributes['control_name']/
<div style="padding: <?php echo esc_attr( $attributes['control_name'] ); ?>">
    Content with custom padding
</div>
```

```hbs title="Handlebars" /{{control_name}}/
<div style="padding: {{control_name}}">
  Content with custom padding
</div>
```

### Dynamic Margins

```php title="PHP" /$attributes['control_name']/
<div style="margin-top: <?php echo esc_attr( $attributes['control_name'] ); ?>">
    Content with custom top margin
</div>
```

### Post Meta

```php title="Post Meta" /get_lzb_meta( 'control_meta_name' )/
<?php
$spacing = get_lzb_meta( 'control_meta_name' );
if ( $spacing ) {
    echo '<div style="gap: ' . esc_attr( $spacing ) . '">';
    echo '    Content with custom gap';
    echo '</div>';
}
?>
```

Common uses for Units control:
- Padding and margins
- Width and height
- Font sizes
- Border widths
- Gap spacing

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt