On my css I have p{margin:5% 0} which sets a space between paragraphs at 5%.For many consecutive paragraphs, this is what I want. But I have reference links under some paragraphs and I don't want 5% between the bottom of these paragraphs and the top of the first link under these paragraphs. I can always put the </p> after the first link instead of before, but is there a better way?

Thanks,

Chris

ralphm
—
2012-10-05T04:50:00Z —
#2

It's not the best idea to have links (inline elements) immediately following <p> (block elements), but, that said, you could perhaps do something like

p + a {margin-top: -10px;}

I used px there rather than %, as top and bottom percent is less reliable, I think. You have to ask yourself, percentage of what? It's better to use ems for top/bottom spacing, or even px.

Chris77
—
2012-10-05T13:43:57Z —
#3

I put .first{margin-top:-10px} in the cssand in the html<a href="http://www.science......." class="first"">yyyy</a><br />

and it had no effect on the first link after the paragrap and w3c gave me a number of these css warnings

Redefinition of margin-bottom9 Redefinition of margin-left9 Redefinition of margin-top9 Redefinition of margin-right9 Redefinition of padding-bottom9 Redefinition of padding-left9 Redefinition of padding-top9 Redefinition of padding-right

If you are going to go through the code and add classes, it would be worth adding a div or <p> around them too.

Sibling selectors are well supported, except perhaps in IE6, which has less than 1% usage now. So effectively, it works in all browsers.

Chris77
—
2012-10-05T15:57:33Z —
#10

Blocks cause a lot of problems with no unique benefit; if you don't want something to the right use a <br>. Here, artificailly creating a block (display: block) around the first reference link creates a new problem - there's an unwanted space between the first and second links.

So you say margin-top: -3% works with one block invading the space of another block and that inline code can't invade the space of a block.

I'm starting to thing I need two different <p>sp{margin:5% 0}p.first{margin-top:5%;margin-bottom:3%}

What do you think?

ralphm
—
2012-10-05T16:08:05Z —
#11

You could use display: inline-block instead of display: block to prevent the link taking up a line of its own. But at the moment I'm not really clear on your setup, so it's a bit hard to advise. It would be helpful if you could post a link or the code for an example page, with an indication of how you want it laid out. If you have a number of links together, it sounds like it would be better to wrap them in <li>s inside a <ul>.

ronpat
—
2012-10-05T19:41:57Z —
#12

Chris, unless I mistunderstand the issue (very possible (:), the following example seems like what you are requesting:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
Comments
-->
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
padding:0px;
margin:0px;
}
div {
border:1px solid #0a0;
width:400px;
margin:0px auto;
}
p {
margin-top:1.25em;
margin-bottom:.25em;
}
</style>
</head>
<body>
<div>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<a href="#">click me</a>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<a href="#">click me</a>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<a href="#">click me</a>
</div>
</body>
</html>

Let me know, please.

ronpat
—
2012-10-05T20:40:19Z —
#13

Acknowledging that anchors (inline devices) should be within a container (other than div.outer), this example is exactly like the previous one except that it puts <div>s around the anchors. Same look and feel. (Sorry, I'm a little "slow" today.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?890828-How-To-Deal-With-Reference-Links
Started by Chris77, 2012.10.05 00:15
-->
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
padding:0px;
margin:0px;
}
div.outer {
border:1px solid #0a0;
width:400px;
margin:0px auto;
}
p {
margin-top:1.25em;
margin-bottom:.25em;
}
.anchor {} /* style as desired, if needed */
</style>
</head>
<body>
<div class="outer">
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<div class="anchor"><a href="#">click me</a></div>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<div class="anchor"><a href="#">click me</a></div>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<p>This is a sentence in a really short paragraph.</p>
<div class="anchor"><a href="#">click me</a></div>
</div>
</body>
</html>

dresden_phoenix
—
2012-10-05T23:05:51Z —
#14

Lets analyze the situation here: you want the text in the anchor (reference link) to STILL be in its own line ( possibly why you decided to put it outside the P, even tho inline elements and block elements should NOt be siblings) but as such you want it to have different margins. Am I right?

You could. wrap the anchor in it's own P tag. <p class="refLink'><a href="#">meh whatever</a></p> semantically one would wonder if a that is really a P anyway... so perhaps you could use a DIV instead of a P.

BUT REALLY.. I submit that a reference link is part of the paragraph (or last part of the last paragraph in the group) it references.

where <p> is for no lnks after</p> and<p class="first"> is for links after </p>

This way the vertical distance between two paragraphs when there's no links after the first paragraphs is 5% and the vertical distance between the first paragraph and a first link after the first paragraph is not 5% (it's 1.5%).