# `Bylaw.Credo.Check.HEEx.NoElementSpacing`
[🔗](https://github.com/ryanzidago/bylaw/blob/v0.4.0/lib/bylaw/credo/check/heex/no_element_spacing.ex#L1)

## Basics

> #### This check is disabled by default. {: .neutral}
>
> [Learn how to enable it](`e:credo:config_file.html#checks`) via `.credo.exs`.

This check has a base priority of `high` and works with any version of Elixir.

## Explanation

Discourages Tailwind margin utility classes on static HEEx/HTML elements.

Layout spacing belongs between components or groups rather than being spread
across individual elements. Using container gaps makes relationships easier
to see and prevents spacing rules from accumulating as markup changes.

## Examples

Embedded `~H` templates are checked during normal Credo runs over Elixir
files. Standalone `.html.heex` templates require enabling
`Bylaw.Credo.Plugin.HEExSources` in Credo's `plugins` configuration.

Dynamic class values, component tags, slot tags, and root attributes are
ignored because their final DOM classes cannot be proven statically.
Avoid:

      ~H"""
      <div class="mt-4">
        Content
      </div>
      """
Prefer:

      ~H"""
      <div class="flex flex-col gap-4">
        <div>Content</div>
      </div>
      """

## Notes

Embedded `~H` templates in `.ex` and `.exs` files are checked by Credo's normal source traversal. Standalone `.html.heex` templates are checked when `Bylaw.Credo.Plugin.HEExSources` is enabled in `.credo.exs`.

This check uses Phoenix LiveView's undocumented HEEx tokenizer when it is available. Add `phoenix_live_view` to applications that enable this check.

This check uses static HEEx token analysis, so it reports only patterns visible in the template source.

## Options

This check has no check-specific options. Configure it with an empty option list.

## Usage

Add this check to Credo's `checks:` list in `.credo.exs`:

```elixir
%{
  configs: [
    %{
      name: "default",
      checks: [
        {Bylaw.Credo.Check.HEEx.NoElementSpacing, []}
      ]
    }
  ]
}
```

## Check-Specific Parameters

*There are no specific parameters for this check.*

## General Parameters

Like with all checks, [general params](`e:credo:check_params.html`) can be applied.

Parameters can be configured via the [`.credo.exs` config file](`e:credo:config_file.html`).

---

*Consult [api-reference.md](api-reference.md) for complete listing*