CODEWITHSUNDEEP
htmlcss
BonJon
BonJon

Reputation: 799

How to create padding for the element in my codes?

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!

Upvotes: 0

Views: 94

Answers (4)

Mr-Cutia
Mr-Cutia

Reputation: 83

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

Like this:

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

Upvotes: 0

DivineChef
DivineChef

Reputation: 1221

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

DEMO HERE

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

Upvotes: 1

SKeurentjes
SKeurentjes

Reputation: 1878

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/

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

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

Upvotes: 0

Related Questions