bulrush Posted September 7, 2010 Share Posted September 7, 2010 I would like to put a little padding above and below a text element, but not enough for a whole line (I don't want to use <p>). PLEASE NOTE: there are multiple rows of text in this single table cell. I have created a CSS class like this: .modelnumcat { font-style:italic; /*padding-top:8px; padding-bottom:8px; */ margin-top:8px; margin-bottom:8px; } The style.css file is included in my html file like this: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Print Draft Report like Catalog v.10d</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> I call it out like this: <tr><td valign="top"><b>Product name goes here</b><br/> Subname goes here<br/> <span class="modelnumcat">34 5/8`` blah blah blah offset this text with a little space above and below</span><br/> I have also tried using the class in a <br> tag: <br class="modelnumcat">34 5/8`` blah blah blah offset this text with a little space above and below</br> But it doesn't work. The italics work but not the padding. In my CSS I have tried using "padding" and "margin" but neither works. Does it matter that I am inside a table? Thanks. Quote Link to comment Share on other sites More sharing options...
haku Posted September 8, 2010 Share Posted September 8, 2010 Span tags are inline elements, and will not take padding as-is. You will need to set: display:block; to the CSS for the span tag before your padding will work. Quote Link to comment Share on other sites More sharing options...
bulrush Posted September 8, 2010 Author Share Posted September 8, 2010 Thank you. This appears to be working. The working CSS code is now: .modelnumcat { font-style:italic; padding-top:6px; padding-bottom:6px; display:block; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.