Stuck at HTML, text-indent? That’s not a big deal. All you need is to know the right code to indent text and use it right as well.
Many times the coders are unable to indent text into HTML appropriately. They are not using the right codes, and eventually, face errors in their results. The indention codes are simple and sorted. Before applying the code, you need to know that text-indent property specifies the indentation of the first line.
You can even indent the first line in Html or a specific paragraph of text using these codes. Many developers prefer to have 4 space or 2-space indentation. You can make your own choice. The appropriate way is to indent the nested tag once inside the parent tag. It lets you have a symmetrical indention.
<p> Paragraph text string1 </p>
<p>
Paragraph text string2
</p>There is a common mistake that codes make in the HTML indent is the indentation of code. They normally put the opening paragraph tag in the indentation that will not get you the required results.
If you need any help, you can hire a freelance web developer in dubai to handle your website issues.
The mistake with paragraph indention shows in the example
<p> Paragraph text string</p>
<p>Sample Text paragraph
</p>
HTML Indentation Using CSS
The best thing about coding is limitless opportunities. When working on one language, it is not necessary to stick to it. You have the option to access it in multiple ways.
Similarly, in your HTML element, it is possible to have text indenting with the help of CSS. You just need to know the right code and the problem is sorted. The simple codes enable you to get quick results and avoid all hustle of trial and error. To indent paragraph text in HTML/CSS you can use code like this:
<p class="indent">
Paragraph text string1
</p>
If you want to indent the first line of a paragraph with a specific length, then you can use the TEXT-INDENT property of CSS.
It lets you define a specific length for the indentation of the first line. The code helps you add more specifications to the text on your webpage.
p.indent {
text-indent: 25px;
}
In this code, you can use any CSS length property unit for the line indentation. Choose from the percentage to pixels, em, rem or others. It helps you to have the ultimate page customization according to your requirement. Using the code, it is possible to adjust different text lines on a page with different indention orders.
Moreover, the same code combination can be used for the reverse indentation. If you want to stand the first line out to the left side of the page, you can use a negative unit value in the same code.
p.indent {
text-indent: -25px;
}
The code will shift the first line to the left side at a specific degree you have chosen.
To shift the whole paragraph to left or right you can use the MARGIN-LEFT property of CSS. It makes the whole paragraph indent at the same time.
p.shifted {
margin-left: 25px;
}
To shift paragraphs to right you can use the similar code with a different property.
p.shifted {
margin-right: 25px;
}
Bottom line
Coding is fun when you know the right codes or language to incorporate. It is not a linear model that keeps you stuck with some specific codes and language. Mixing codes from two different languages makes the overall coding easier and impressive.
HTML and CSS codes are supportive of each other and let you have the best and swift results. Know your codes best and practice them well to end up with ultimate results.