You set the bottom margin of .graytext to zero, but you set a bottom margin of 19px for #rightbox p. The rule with the ID selector is more specific, so it will override the rule with the class selector.
instead of modifying the existing css …can i append this only in the intended paragraph ?
I don’t want to modify but I am open to append or add to the CSS…because this CSS could be used elesewhere in the same page…so I just don’t want to modify …but I want to append a style only to the needed paragraph.
You could make a class and apply that to the paragraph you want to change:
#rightbox p.puller {margin-top: -15px;}
<p class="graytext puller">Phasellus ante sem-hendrerit fermentum </p>
<p class="clear puller">Duis consectetur enim felis. In hac habitasse platea dictumst. Nullam dignissim dignissim nulla, ut molestie est aliquam cursus. Ut vitae ultrices lacus. Duis a diam risus.<br />
Nullam interdum euismod nibh, ac dictum metus <br />
Maecenas pellentesque, diam at suscipit mollis, turpis masss<br />
Nulla facilisi. Praesent nisi ligula, eleifend eu egest <br />
Fusce leo mi, ultricies sed sollicitudin eu, pretium vel felis pretium vel<br />
</p>
I wouldn’t go for inline styling unless it’s for testing purposes
I took a look at your code and this is how I would develop your paragraphs of text.
It doesn’t require any negetive margins at all to make this work. I saw that you had </br> set to some of the paragraphs of text, all you would need to do is seperate those words with <p></p>element and set a padding to seperate the paragraphs of text being so close together.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Untitled Document
</title>
<style type="text/css">
* {
margin: 0; /* CSS global reset */
padding: 0; }
body {
font-family: arial, sans-serif; /* Apply these styles to the body since you had them assigned to your rightbox anyways which is the container. */
text-align: left;
font-weight: bold;
line-height: 1.3em; }
#right_box {
width: 460px; /*Apply's styling to the rightbox element */ /*Set width */
margin: 0 35px 0 0; /* margin-right:35px; I would apply long-hand styling because you only have one value applied to element */ }
.top_header { color: #003150; }
.rightbox_section_2 {
color: #80766e; /* This styles the color of the text */
</style>
</head>
<body>
<div id="right_box">
<h2 class="top_header">
Lorem ipsum dolor sit amet
</h2>
<p class="rightbox_section_1">
Proin faucibus fermentum mattis. Morbi at viverra massa. Donec ut eros nulla. Proin volutpat, lectus ac dapibus consequat, massa
felis porttitor enim, id sollicitudin odio mi et libero.
</p>
<p class="rightbox_section_2">
Phasellus ante sem-hendrerit fermentum
</p>
<p class="rightbox_section_3">
Duis consectetur enim felis. In hac habitasse platea dictumst. Nullam dignissim dignissim nulla, ut molestie est aliquam cursus. Ut
vitae ultrices lacus. Duis a diam risus.
Nullam interdum euismod nibh, ac dictum metus
Maecenas pellentesque, diam at suscipit mollis, turpis masss
Nulla facilisi. Praesent nisi ligula, eleifend eu egest
Fusce leo mi, ultricies sed sollicitudin eu, pretium vel felis pretium vel
</p>
</div>
</body>
</html>
EDIT actually, margin:0; works by itself. You have to realise that browsers apply a default margin and padding to paragraphs, and that is all you are seeing, and it shouldn’t take two threads to discover this.
The second one is more specific and will override the first one, so the paragraph gets a bottom margin of 19px.
Using a style attribute trumps the rules in the style sheet, so style="margin-bottom:0" forces the bottom margin to be zero for that particular element.
As others have noted above, this is not a good idea from a maintenance point of view, since you tie your presentation tightly to the markup. But as a temporary fix it’s okay. (Your CSS isn’t very maintenance friendly anyway, with presentational IDs and class names etc.)
The vertical distance between to adjacent elements is determined by the bottom margin/padding of the first element and the top margin/padding of the second element. Since all vertical paddings and top margins involved are already set to zero, we only have to worry about the bottom margin of the first of the two elements.
It not something you should ever rely on, anyway. If it’s important (or even !important :)) to you to have full control over margins and padding, you must declare them explicitly.
Yes :). I meant unless it’s manually set then no paddings are applied. Dr JOhns statement implied regular <p> styles generated by the browser stylesheet
Once again, i dare to ask: is it documented somewhere that contemporary browsers don’t use any padding for paragraphs in their user agent style sheets? It’s the first time i ever heard that mentioning
