CODEWITHSUNDEEP
htmlcsstags
Hans Ullrich
Hans Ullrich

Reputation: 185

Adding padding to plain html text

I have a widget on my website which generates content which looks like this:

<div class="wrapper">
    some title
    <p>some content</p>
</div>

I want to give the title text padding and the <p> padding

I already tried this:

.wrapper > * {padding:15px;}

But that doesnt apply to the plain text. Is there some sort of selector for plain text?

I also created a fiddle to visualize it.

http://jsfiddle.net/62v59s3j/

Upvotes: 0

Views: 1011

Answers (3)

Julius Depulla
Julius Depulla

Reputation: 1633

Let your web browser help you in developing.

Right click on the element and select inspect element from the context menu

In the source code, right on the element and from the context menu select copy selector, paste in your css

enter image description here

Upvotes: 0

Eduardo Wada
Eduardo Wada

Reputation: 2647

If I understood correctly, think you should apply padding to your wrapper, and remove left and right padding from the <p>

.wrapper > p {
  padding:15px 0px; 
}

.wrapper {
  border:1px solid #ddd;
  padding:15px; 
}

jsFiddle

Upvotes: 1

Quentin
Quentin

Reputation: 943510

No.

With a couple of very limited exceptions (like :first-letter), CSS only allows you to select elements.

If you want a block to have a title, then it should probably be a heading (<h1> et al), and that would give you an element to select. For that matter the block may be better represented as a <section> rather than a <div>.

Upvotes: 1

Related Questions