Text margins

HTML & CSS
1

I’m noticing that my text positioning is off. Is there a way to set margins for the text? What is the best way?

2

Use line-height.

3

Line height will change the space between lines but I need the line starting and ending points consistent. Is there a way to do that?

4

The most likely scenario is that you have (left/right) PADDING or (left/right) MARGIN being applied to the element that contains your text (or any other parent element).Every containing element is a “box” and by default text begins at the very edge of said box, however padding can be used to move the the text away from the edge OR margin to move the entire element away from the edge of its parent thus giving the appearance of “indent”

ASIDE from that there is the text-indent property, which only works for left-aligned text inside BLOCK ELEMENTS anyway.

example: text-indent:-100px;/indents the first line of text leftward by 100px/

Hope that helps.

5

OK so the text cannot line up without taking the padding off?

6

Your question is a bit vague. What are you really trying to do here. Do you jut want text-align: justify?

7

what i’m trying to do is get text to start and end at the same point on all lines.

8

That doesn’t mean anything to me without a picture. For all I know, it means you want to text to loop around in a circle and end where it starts. You have to paint more accurate picture—if not in a graphic, then in words. :slight_smile:

9

like this
x this is the first line x
x this is the second x

it has a point where the lines stop and end so it goes around and makes new lines. Does that help?

10

All I can think is that text-align: justify is what you want? E.g.

p {text-align: justify;}
11

I think that may work, I’ll give it a try

12

hmm can that be put in the css or does it have to be in the html file?

13

In the CSS file.

14

where it was shown p {text-align: justify;}, is a class needed to be created for p then?

15

If you want only some <p> justified like that, then yes, you’ll need to target them. If it’s <p>s you a want to target, the best way is to target the container. E.g.

<div class="container">
  <p>A paragraph ...</p>
  <p>A paragraph ...</p>
  <p>A paragraph ...</p>
</div>

.container p {
  text-align: justify;
}

If you want more advice, maybe post a link so we can see what’s going on. :slight_smile: