How to create padding for the element in my codes?

0
votes

I am trying to create a simple element like the following

<span class='title'>Title</span>
<span class='content'>lots of texts here</span>

In browser it displays like this

Titlelosts of texts here......Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

I want to display like

Titlelosts of texts here......Lorem Ipsum is simply dummy text of the printing and typesetting    
     industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,    
     when an unknown printer took a galley of type and scrambled it to make a type specimen    
     book. It has survived not only five centuries, but also the leap into electronic   
     typesetting, remaining essentially unchanged. It was popularised in the 1960s with the   
     release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

so I can see title clearly but I can't changing the elements (so it will still be two spans).

Is it possible to do it?

Thanks a lot!

4
htmlcss
where is the title in the result display (you like)? it's important to know that. If you mean you want to indent all the text of the content, then that's simple. Anyway you can always play with :first-line selector to indent the first line only. - King King
sorry for the confusion. I just want to indent all the contents on each line so it won't look like Title and contents are mixed together. - BonJon

4 Answers

1
votes

Put it all in one div with a class. I called it textblock.

DEMO HERE

.textblock {
margin-left:50px;
text-indent:-50px;
}
0
votes

You can float the title to the left of the content, and set the content's padding-left But both spans would have to be display: block:

.title, .content {
    display: block;
}

.title {
    float:left;
}

.content {
    padding-left: 30px; /*The higher the padding, the more it will be apart the title */
}

It will give the effect you described: http://jsfiddle.net/5e8r4/1/
And if you want to break a line and keep the ident as well, just remove the float:left

0
votes

Use text-indent: -100px; in combination with padding: 0 100px; to get the result you want (you will have to put a div around it though).

example: http://jsfiddle.net/skeurentjes/yFmfx/1/

0
votes

you can use display inline-block. With this, you can put margin ou padding.

Like this:

.content{
    display:inline-block;
    padding-left: 5px;
}