# Whitespace Control

White space control is essential for managing the appearance and readability of your rendered HTML in Liquid templates. This document provides an overview of white space control techniques in Liquid and how to use them effectively.

## Understanding White Space:

White space refers to the spaces, tabs, and line breaks that separate content within your Liquid templates. While these characters help with readability during development, they can affect the appearance of the rendered HTML and cause unwanted spacing.

Example:

```liquid
{% if product.available %}
  <p>In stock</p>
{% else %}
  <p>Out of stock</p>
{% endif %}
```

The rendered HTML may contain extra line breaks and spaces due to the formatting of the Liquid code.

## 2. White Space Control Techniques:

There are several techniques to control white space in Liquid templates, ensuring the rendered HTML is clean and well-formatted.

### 2.1. Using the hyphen (-)

You can control white space by adding a hyphen (-) within the opening and closing Liquid tags. This will remove any spaces, tabs, or line breaks directly before or after the tags.

Example:

```css
cssCopy code{% if product.available -%}
  <p>In stock</p>
{%- else -%}
  <p>Out of stock</p>
{%- endif %}
```

With this syntax, extra white space before and after the Liquid tags is removed in the rendered HTML.

### 2.2. Utilizing the 'strip' filter

The 'strip' filter removes any leading and trailing white space from a string.

Example:

```arduino
{{ "   Hello, World!   " | strip }}
```

The rendered output will be "Hello, World!" without any leading or trailing spaces.

### 2.3. Employing the 'strip\_newlines' filter:

The 'strip\_newlines' filter removes any newline characters from a string, effectively joining multiple lines into a single line.

Example:

```swift
{{ "Line 1\nLine 2\nLine 3" | strip_newlines }}
```

The rendered output will be "Line 1Line 2Line 3" on a single line.

## Summary

Controlling white space in your Liquid templates helps ensure that the rendered HTML is clean and well-formatted. By using techniques such as hyphen syntax, the 'strip' filter, and the 'strip\_newlines' filter, you&#x20;

can eliminate unwanted spaces, tabs, and line breaks, creating a more professional appearance and improving the readability of your final output.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cryptococo.gitbook.io/cocoshop-theme-development/liquid/basics/whitespace-control.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.