How do I shrink the size of a tag

Question

Pretty new to css and trying to make the tags on my page smaller on all sides. What are the best settings to modify? Margin doesn't seem to do what I want.

.story .content .tags .tag
{
    margin: 10px 5px 10px 5px;
    background-color: #99FF33;
    font-weight: 500;
    color: #330099;
    font-style: inherit;
    font-family: 'Times New Roman';
    padding-right: 6px;
}

Here is the relevant snippet, I want to make the links smaller vertically. Do I need to specify the height explicitly then?:

<span class="tags"><span class="text">:</span>
                    <% for (int i = 0; i < story.Tags.Length; i++) %>
                    <% { %>
                    <%     string tag = story.Tags[i]; %>
                    <%     if (i > 0) %>
                    <%     { %>
                    <%=         " "%>
                    <%     } %>
                    <%=     Html.ActionLink<StoryController>(c => c.Tag(tag.UrlEncode(), 1), Server.HtmlEncode(tag), new { @class = "tag" })%>
                    <% } %>
                </span>

Answer 1

This entirely depends on what you are trying to style. Is it a text component like paragraph? A Div?

You can use width and height on a div.

 width:200px;
 height:20px;

etc.

But we need some html to recommend meaningful solutions.

Answer 2

I think you're looking for padding. My guess is that you're looking to decrease the space between the edge of the text and where the background colour stops filling (basically) and where the border starts, and changing the padding will give the effect you want.

If you want to decrease the font size, look into the font-size property. Also, look into the line-height property.

Answer 3

Also, if you're applying that to an inline element like an A or a SPAN, you'll find that the vertical values don't apply. You don't give enough context for us to comment sensibly - try linking to a page showing the problem and we won't have to guess solutions for you!

Answer 4

Just from the actual class names it looks like you're tying to style tags in a tag-cloud? if thats the case I think you may want to try making your padding a bit smaller maybe:

padding:3px;

If they are inline elements than you won't have any luck with margins.

I could only tell you more if I was a mind-reader :)

Answer 5

Thanks for the help so far! I updated the question with the relevant content.

Answer 6

As was mentioned, if you're trying to reduce the vertical height of an inline element, top or bottom margin/padding won't do anything. However, you may want to try reducing the line-height of the text:

 line-height: 12px;

Just don't make the line-height a smaller size than the font-size or your text may appead clipped.

Answer 7

Ok, HTML.ActionLink in ASP.NET MVC creates anchor tags (A, aka "links"). By default A tags have a display style of "inline". This means that Bryan M's answer will suit your needs. Just declare the line-height to a height greater than or equal to the font size.

Another option would be to change the display style to "inline-block" which would allow you to set an explicit height and width. This is useful if you want all of your tags to be the same size.

.tag
{
    display: -moz-inline-block; /* For FF2 */
    display: inline-block; /* For everyone else */
    height: 12px;
    overflow: hidden;
}

Note the FireFox 2 specific syntax. FF3 does not have this problem.

It might help to read the current CSS standard (2.1) which you can find at W3C. You may be interested in Visual formatting model section specifically.

Answer 8

In order to apply dimensions and/or padding to an object it should be a block level element, not an inline element. <span>s are inline elements and not very suitable for things like a list of tags. Try something like this instead:

<style>
.tags {
float: left;
border: 1px solid blue;
list-style-type: none;
}
    .tags li {
    float: left;
    margin-right: 6px;
    font-family: 'Times New Roman';
    }
        .tags li a {
        display: block;
        padding: 0 5px;
        text-decoration: none;
        color: #330099;
        background-color: #99FF33;
        }
            .tags li a:hover {
            background-color: #330099;
            color: #99FF33;
            text-decoration: none;
            }
</style>


<ul class="tags">
    <% for (int i = 0; i < story.Tags.Length; i++) { %>
        <% string tag = story.Tags[i]; %>
        <li><%= Html.ActionLink<StoryController>(c => c.Tag(tag.UrlEncode(), 1), Server.HtmlEncode(tag), new { @class = "tag" })%></li>
    <% } %>
</ul>

This will give you a semantically correct "list" of tags, left aligned and with the ability of giving padding and margins to each item. I also took the liberty of adding a :hover style and removing the ":" (the blue outline is just there to show you the size of the list itself). Give it a spin, hope you like the results, and best of luck with your project!