No line spacing with CSS

Hi,

If I want a single line spacing I use <p> and </p> tags like anyone else.

I cannot workout what to do if I want no space. How can I get:

Line 1 is here.
Line 2 is here.
Line3 is here.

I’m stuck! What CSS do I use?

Matt.

Hi,m

I already answered this in your other post. Just remove the margin and adjust the line-height.

Example:


<!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">
p {
    margin:0;
    line-height:1.0;
    background:red;
    border-bottom:1px solid #000;/* for testing*/
}
</style>
</head>
<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>


You can see that there is no spacing between the elements at all.

I’m guessing that you mean something else or are suffering with a particular browsers issue somewhere so we need more details.

Yes - I thought I could apply the same concept you suggested earlier but it is not working properly in this instance:

<div class="cart">
   <p>
   <ul class="cart1">
 <?php   $num=mysql_num_rows($result); 
if($num > 2)
{
	while($row = mysql_fetch_array($result)){
	 $totalQuantity += ($row["quantity"] * 1);
	 $totalCost += ($row["quantity"] * $row["price"]);}
	 echo "<li>";
	 echo $totalQuantity;
	 echo "Items</li>";
	 echo "<li>Total Cost: £";
	 echo number_format($totalCost, 2, ".", ",");
	 echo "</li>";
}
else
{
	
 while($row = mysql_fetch_array($result)){
	 echo "<li>";
	 echo $row["shortname"];
	 echo $row["quantity"];
	 echo "Item";
	 echo "</li>";
	 $totalCost += ($row["quantity"] * $row["price"]);}
	 echo "<li>";
	 echo "Total Cost: £";
	 echo number_format($totalCost, 2, ".", ",");
	echo "</li>";}
	 ?>
    
    View Cart
    </ul>
    </p>
    
    </div>

Does the technique still work amongst PHP code??

When I look at View Source on the output of a browser I get:

<div class=“cart”>
<p>
<ul class=“cart1”>
<li>2460LT1Item</li><li>3760T1Item</li><li>Total Cost: £50.00</li>
View Cart
</ul>
</p>

&lt;/div&gt;

2460LT1Item

and

3760T1Item

appear on the same line!!??

Matt.

OK - I’ve found the problem. You said to use <p> and define that within CSS.

I defined a tag called <p2> instead. The reason I did this is because I do not want zero line spacing for the whole template file!

It works with using <p> tags but it does not work when I use <p2> tags!

How can I have single and no-line spacing within the same web page?

Matt.

Don’t confuse PHP with html and CSS. They are completely different applications.

All a browser understands is html and css and that is all that the browser receives as you can see from view source. You should work with html and css until you have the design looking like you want and then convert it into PHP or whatever afterwards.

The code you have above is invalid as you can’t nest a ul inside a p element. P elements can only contain inline elements such as spans, anchors etc. There seems to be no reason to wrap it all up in a p element anyway so remove it.

Do you want all those list items to be on the same line? If so you will need to float them to the left. If not you need do nothing as they will automatically start under each other.

Be aware that the ul with have default padding and margins that you will need to zero.

I’m a little confused as to what you want it to look like but I think I covered most things :slight_smile:

You can’t make up your own tag names in html lol :slight_smile: There is no element called a p2 so remove them.

If you need to be specific then you would add classes to the elements concerned or target them via context (assuming they are unique within that context).

e.g. This will target all p element within the div called “cart”


<div class="cart">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>


.cart p{margin:0}

Or:

This will only target the selected element:


p.special {margin:0}


<div class="cart">
    <p>test</p>
    [B]<p class="special">Only this one is targeted by the above rule</p>[/B]
    <p>test</p>
    <p>test</p>
</div>