/    Sign up×
Community /Pin to ProfileBookmark

styling empty p tags

Copy linkTweet thisAlerts:
Dec 19.2010

i am using the following for p tags
p{
margin: 0 0 8px 0;
line-height: 18px;
}

with this each para has a line height and margin between paragraphs

however in the html editor where the content is written when i add spaces empty <p></p> tags are being created by the editor and with the above style for p tags there is lot of unwanted vertical gaps being created

is there a way to style empty <p></p> tag so that these vertical gaps will not be created

also i am using a separate css for printing when i print in firefox i have set the url to print at top right and if the url is too long only a portion of the url is being printed, is there a way to print the entire url or is this a normal printer behaviour to print the url to whatever extent the width is available

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WizardOfWasDec 20.2010 — The question is: Why do you need empty <p></p> tags? They serve no purpose so remove them from the code.

If you need to create space then that should be set on a legitimate element in the page.

If you want more space between two paragraphs use some inline css styling:

<p>Normal spacing of 8px bottom margin</p>

<p style="margin-bottom: 25px;">More spacing of 25px bottom margin</p>


I wouldn't clutter your code with inline styling BUT it is useful for creating the one or two cases where it would probably be over-kill to create a new css style in your stylesheet.
Copy linkTweet thisAlerts:
@sudhakararaogauthorDec 20.2010 — i am using tiny mce editor which is creating the empty p tags automatically when i press enter
Copy linkTweet thisAlerts:
@WizardOfWasDec 20.2010 — I guess you could set your page up so the 8px bottom margin only gets applied to the <p> tags in a targeted (non-editable) container and nothing gets applied to <p> tags in regions which are editable through the visual editor.

<div id="thisStyle"><p>Some text</p></div>

#thisStyle p{

margin: 0 0 8px 0;

line-height: 18px;

}

The idea is NOT to allow access to edit the 'thisStyle' container to anyone who doesn't understand html.

Problem with Content Managemnet Systems is people with no code writing experience can create havoc.
Copy linkTweet thisAlerts:
@KorDec 23.2010 — i am using tiny mce editor which is creating the empty p tags automatically when i press enter[/QUOTE]
I think I repeat my self: Just press SHIFT+ENTER, and the editor (as any serious editor) should create<BR> instead of <P></P>, and you have solved the problem.
×

Success!

Help @sudhakararaog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...