I often get asked how to custom adjust the automatic spacing added around a paragraph of text in HTML when using the
<P>tag. You can use the margin attribute and evenly or unevenly adjust the spacing. For example:
<P style="”margin: " 50px”>Sample text.
</P> would result in:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
<P style="”margin: " 10px” 25px>Sample text.
</P> would result in:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
You can blanket apply a style change to all <P> tags by adding the margin attribute changes to your CSS file, or you can assign a class to the <P> tag and control when the margin changes appear. I use this method a lot in my projects, especially when I need to add a little more space than a break provides and a little less than a paragraph tag provides to a section of text:
Attribute in CSS file: p.smspace {margin: 5px 0px}
Resulting View:
Regular paragraph text.
Regular paragraph text.
Condensed paragraph text.
Regular paragraph text.
Use W3Schools TryIt Editor to play around with it: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs2