## Space

### Semantic Parts

- root（`semantic-mark-root`）: Root element with flex layout, gap settings, alignment, wrap and other spacing container basic styles
- item（`semantic-mark-item`）: Wrapped item element with spacing item layout and styles, providing wrapper for each child element for inline alignment
- separator（`semantic-mark-separator`）: Separator element with divider styling

### Usage Example

```tsx
<Space
  {...otherProps}
  classNames={{
    root: "semantic-mark-root",
    item: "semantic-mark-item",
    separator: "semantic-mark-separator"
  }}
/>
```

### Abstract DOM Structure

```html
<div class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id semantic-mark-root">
        <div class="ant-space-item semantic-mark-item">
          <button class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid" type="button">
            <span>
              Primary
            </span>
          </button>
        </div>
        <span class="ant-space-item-separator semantic-mark-separator">
          <div class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail" role="separator">
        
        <div class="ant-space-item semantic-mark-item">
          <button class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined" type="button">
            <span>
              Default
            </span>
          </button>
        </div>
        <span class="ant-space-item-separator semantic-mark-separator">
          <div class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail" role="separator">
        
        <div class="ant-space-item semantic-mark-item">
          <button class="ant-btn css-var-test-id ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed" type="button">
            <span>
              Dashed
            </span>
          </button>
        </div>
      </div>
    </span></div>
    <div class="ant-col ant-col-8 css-var-test-id">
      <ul class="acss-11b5qta">
        <li class="acss-1ehfz5v">
          <div class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical">
            <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small">
              <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small">
                <h5 class="ant-typography css-var-test-id" style="margin: 0px;">
                  root
                </h5>
              </div>
              <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small">
                <button aria-hidden="true" class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only" type="button">
                  <span class="ant-btn-icon">
                    <span aria-label="pushpin" class="anticon anticon-pushpin" role="img">
                      <svg aria-hidden="true" data-icon="pushpin" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
                        <path d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"></path>
                      </svg>
                    </span>
                  </span>
                </button>
                <button aria-hidden="true" class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only" type="button">
                  <span class="ant-btn-icon">
                    <span aria-label="info-circle" class="anticon anticon-info-circle" role="img">
                      <svg aria-hidden="true" data-icon="info-circle" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                        <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
                      </svg>
                    </span>
                  </span>
                </button>
              </div>
            </div>
            <div class="ant-typography css-var-test-id" style="margin: 0px; font-size: 12px;">
              根元素，包含 flex 布局、间隙设置、对齐方式、换行等间距容器的基础样式
            </div>
          </div>
        </li>
        <li class="acss-1ehfz5v">
          <div class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical">
            <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small">
              <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small">
                <h5 class="ant-typography css-var-test-id" style="margin: 0px;">
                  item
                </h5>
              </div>
              <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small">
                <button aria-hidden="true" class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only" type="button">
                  <span class="ant-btn-icon">
                    <span aria-label="pushpin" class="anticon anticon-pushpin" role="img">
                      <svg aria-hidden="true" data-icon="pushpin" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
                        <path d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"></path>
                      </svg>
                    </span>
                  </span>
                </button>
                <button aria-hidden="true" class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only" type="button">
                  <span class="ant-btn-icon">
                    <span aria-label="info-circle" class="anticon anticon-info-circle" role="img">
                      <svg aria-hidden="true" data-icon="info-circle" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                        <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
                      </svg>
                    </span>
                  </span>
                </button>
              </div>
            </div>
            <div class="ant-typography css-var-test-id" style="margin: 0px; font-size: 12px;">
              包裹的子组件，包含间距项的布局和样式，为每个子元素提供包装用于内联对齐
            </div>
          </div>
        </li>
        <li class="acss-1ehfz5v">
          <div class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical">
            <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small">
              <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small">
                <h5 class="ant-typography css-var-test-id" style="margin: 0px;">
                  separator
                </h5>
              </div>
              <div class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small">
                <button aria-hidden="true" class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only" type="button">
                  <span class="ant-btn-icon">
                    <span aria-label="pushpin" class="anticon anticon-pushpin" role="img">
                      <svg aria-hidden="true" data-icon="pushpin" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
                        <path d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"></path>
                      </svg>
                    </span>
                  </span>
                </button>
                <button aria-hidden="true" class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only" type="button">
                  <span class="ant-btn-icon">
                    <span aria-label="info-circle" class="anticon anticon-info-circle" role="img">
                      <svg aria-hidden="true" data-icon="info-circle" fill="currentColor" focusable="false" height="1em" viewBox="64 64 896 896" width="1em">
                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                        <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
                      </svg>
                    </span>
                  </span>
                </button>
              </div>
            </div>
            <div class="ant-typography css-var-test-id" style="margin: 0px; font-size: 12px;">
              分隔符，包含分隔元素的样式
            </div>
          </div>
        </li>
      </ul>
    </div>
  </span></div>
```
