How to add indentation in HTML is one of the most common questions in page layout. In practice, spacing is rarely controlled directly in HTML, because CSS makes it much easier to manage gaps, alignment, and a consistent page design.
What people mean by indentation
The word “indentation” can refer to different things:
- inner spacing — the space inside a block between the content and its edge;
- outer spacing — the space between one element and another;
- first-line indentation — when a paragraph starts slightly farther to the right.
Each of these cases has its own CSS tool. That is why it is important not to confuse margin, padding, and text-indent.
Inner spacing: padding
If you want text not to touch the edges of a block, use padding. This is the best choice for cards, buttons, content boxes with backgrounds, and containers.
.box { padding: 20px; }This code adds equal inner spacing on all sides. If you need different values, you can set them separately:
.box { padding: 10px 20px 15px 20px; }In practice, this is useful on pages where content should look neat and should not be pressed against the border.
Outer spacing: margin
Margin is used when you need to separate elements from each other. For example, it can add space between a heading and a paragraph or between two blocks.
.title { margin-bottom: 12px; }This approach is especially useful in articles, forms, and lists. If you are looking for how to add indentation in HTML between elements, you most likely need margin.
First-line indentation in text
When you want to style a paragraph like traditional printed text, use text-indent:
p { text-indent: 24px; }This creates indentation only for the first line of a paragraph. Important: this effect does not replace padding or margin, because it works only with text blocks.
What not to do
Beginners often try to create indentation with spaces or tab characters in HTML. That is a poor approach, because the browser may ignore extra spaces and the layout can become inconsistent.
It is also better to avoid old HTML attributes for styling when CSS is available. Modern layout should stay flexible, with styling separated from the markup.
What to choose in practice
- For space inside a block — use padding.
- For space between blocks — use margin.
- For the first line of a paragraph — use text-indent.
In short, the answer to how to add indentation in HTML almost always comes down to CSS. It is the cleanest and most reliable way to control page appearance without cluttering the code.
