• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

How to indent First/All Line of Paragraph in HTML and CSS?

Aniruddha Chaudhari/6480/2
HTML & CSS

Do you want add space at the beginning of the first line of the paragraph?

Beginning space is also called as indentation. So it is similar to indenting the first line of the paragraph. You can also indent all the lines in the block.

In this tutorial, I will explain how to indent the first or all the lines in the paragraph one-by-one.

Before that, hope you are familiar with the basic HTML tags like creating paragraph.

Indent First Line of Paragraph in HTML using CSS

Use the text-indent property. It accept any pixel value.

Example to indent first line in paragraph:

p {
    text-indent: 50px;
}

Here the selector is ‘p’ aka ‘paragraph’ and we are setting the 50-pixel indentation (white space at the beginning of the paragraph).

This is how it looks like.

indent first line of paragraph in HTML

Don’t set the negative value for the text-indent property. It will throw the text in the paragraph out of the screen. 😀

What if you want to indent all the lines of the paragraph or all the lines in the block instead of just a first line? Let’s see how you can do that.

Indent All the Lines of Block in HTML using CSS

You can also align and indent all the lines in paragraph. Use padding-left property.

Example for HTML Indent Paragraph All lines:

p {
    padding-left: 50px;
}

This is how it looks like.

HTML indent paragraph all lines

You can also use the margin-left here. But you should understand the difference between “padding” and “margin”.

The “padding” CSS property indent the text in the block whereas “margin” indents the entire block. So use them wisely.

To enhance your text and readability, also check the adding drop-cap for a paragraph using CSS.

Hope you find the tutorial to indent first line of paragraph in HTML useful. This is a simple and very useful CSS trick for formating text. If you have any doubt, let me know in the comment.

Python Interview Questions eBook

CSSHTML
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    Patrick
    July 26, 2021 at 2:15 am

    Thank you! This was very helpful. text-indent was what I was looking for.

    • Reply
      Aniruddha Chaudhari
      July 26, 2021 at 11:14 am

      You’re welcome. I’m glad you find what you were looking for.

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard