How to remove all space (padding, margin or border) from text

Discussion in 'CSS' started by Webed4it, Sep 10, 2010.

0
  1. #1
    Hi, I have a strange requirement for a site, some of the text needs to be completely flush with images above and below as in the attached picture.

    Untitled2.jpg

    Any ideo how to do this.
     
    Webed4it, Sep 10, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Set the font size, then reduce the line height until the gaps disappear.
    
<html>
<head>
<style type='text/css'>
* {
   margin: 0;
   padding: 0;
   border: 0;
}

p {
   font-size: 20px;
   line-height: 13px;
}
</style>
</head>
<body>
<div><img src='image1.jpg'></div>
<p>HOME/ABOUT/PORTFOLIO</p>
<div><img src='image2.jpg'></div>
</body>
</html>
    Code (markup):
    You can also do it with negative margins:
    
p {
   font-size: 20px;
   margin-top: -5px;
   margin-bottom: -5px;
}
    Code (markup):
     
    Cash Nebula, Sep 10, 2010 IP
  3. Webed4it

    Webed4it Peon

    Messages:
    72
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks, I hadn't thought of negative margins. I also found that using em instead of px for the line height works better.
     
    Webed4it, Sep 10, 2010 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yeah, that does works better, and the gap doesn't grow as the text is zoomed. Cool! :cool:
     
    Cash Nebula, Sep 10, 2010 IP