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/

Answers


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


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>.


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


Need Your Help

How to add google places autocomplete to xcode with swift (tutorial)

ios xcode google-maps autocomplete google-places-api

I want to add google places autocomplete to xcode with swift, so users can search on a city and press enter, so should the app show that city on the map.

How to find broken links on a website

html

What techniques or tools are recommended for finding broken links on a website?