I use a small font size text between two horizontal lines. And I need to make space between the two horizontal lines narrower. How do I do it?
Give us link to the site or HTML markup and CSS so we can see how you style it. With that picture, I can only tell it has to do with padding or margin of the nav div.
Okay, It's a post. I guess it still has do to with the padding and margin. Without info, it takes a genius to help you with the issue.
This is my HTML: <hr /> Text. <br /> <hr /> <span style="font-size: x-small;">text, Text, Text</span> <br /> <hr />
Are those actually subsections that don't warrant headings, or are you abusing horizontal rules just because of their defauly behavior? I would suspect the latter with the static style in the markup and relative lack of semantics. In which case, you should be using border in your stylesheet with padding and margin, NOT a HR. I'd have to see the content to say what the proper markup would be, but remember the golden rule of HTML; if you choose your markup based on the default appearance instead of their meaning, you've chosen all the wrong tags for all the wrong reasons. Similar to why IMHO if you are using style="" you are most likely doing something wrong, and if you use <style> you ARE doing something wrong. Though if those should indeed actually be horizontal rules (again, I find that unlikely) in your stylesheet just set their width or a margin on them to narrow them. Again though you'd need REAL content with proper semantics and logical document structure before determining what tags should be used.
Now that's easy. There are a dozen ways to achive what you want. DeathShadow is right. I wouldn't use <hr> for that layout. Since you don't provide how you style it I assume the style is inherited from the master template. Here's the simple example. <html> <head> <style> .upper { margin: 1em 0; font-size: x-large; } .under { padding: 1em 0; font-size: x-small; border-top: 0.1em solid #111; border-bottom: 0.1em solid #111; } </style> </head> <body> <div class="upper"> Children are our most valuable </div> <div class="under"> Valuable, Natural, Resource </div> </body> </html> Code (markup):
Quick help for my friend kertoon: http://www.webcosmoforums.com/content/section/122-css-tutorials.html Take it, it's helpful and quick!
Unfortunately it's Blogger, so a LOT of that is outside the user's control. I actually missed that when I looked at it the first time.
I think It will work well then. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Two border</title> <style> body { font-family: Sagoe UI, sans-serif; font-size: 0.9em; background: #f2f2f2; color: #666; } .container { max-width: 295px; padding: 10px; } .container h2 { font-weight: 400; margin: 5px 0; } p.two-border { border-top: 1px solid #555; border-bottom: 1px solid #555; padding: 15px 0; } </style> </head> <body> <div class="container"> <h2>Children are our most valuable</h2> <p class="two-border">Valuable, Natural, Resource</p> </div> </body> </html> HTML: