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?
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.
I put .first{margin-top:-10px} in the css
and 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-bottom
9 Redefinition of margin-left
9 Redefinition of margin-top
9 Redefinition of margin-right
9 Redefinition of padding-bottom
9 Redefinition of padding-left
9 Redefinition of padding-top
9 Redefinition of padding-right
Not sure why it complains about margin bottom.
What does your “p + a” mean. I haven’t see that before.
So in my css would I have
what I have now
p{text-indent:10%;text-align:justify;margin:5% 0}
a{color:#CCCCFF}
a:hover{text-decoration:none;border-bottom-style:solid;border-bottom-color:#FFF}
and then add
p + a {margin-top: -10px;display: block}
and then in the html for paragraphs that are followed by a link I don’t need anything?
If you are happy to add a class each time, that is fine … except that <a>s are inline elements, so that top margin won’t work by default. You have add display: block, as I mentioned above:
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>s
p{margin:5% 0}
p.first{margin-top:5%;margin-bottom:3%}
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>.
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>
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>
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.
<p> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href=“#” class=‘ref’>meh whatever</a></p>
You can then use something like : .ref{display:block; margin-top:2%;} this way you are adding space between the text and the ref link w/o affecting the margin between Ps
BTW, if it hasn’t been mentioned: margin 5% 0; (or margin-[top|bottom]:5%; sets the VERTICAL space between paragraphs to 5% of the WIDTH of the parent container. Is that what you want?
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%).