How to reduce tag size
Pretty new to css and trying to make the labels on my page smaller on all sides. What are the best settings to change? 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 the links to be smaller vertically. Do I need to specify the height explicitly ?:
<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>
As mentioned, if you are trying to reduce the vertical height of an inline element, the top or bottom margin / padding will do nothing. However, you can try to reduce the line-height of the text:
line-height: 12px;
Just don't make the line-height smaller than font-size
that, or your text may be clipped.
source to share
I think you are looking for complements. I assume you want to reduce the space between the edge of the text and where the background color stops filling (mostly) and where the border starts, and changing the padding will give the effect you want.
If you want to reduce the font size, have a look at the font-size property. Also, take a look at the line-height property.
source to share
Just from the actual class names, it looks like you are binding to style tags in the tag cloud? if in this case I think you can try to make your stuff a little smaller, maybe:
padding:3px;
If they are inline elements, you would have no luck with fields.
I could tell you more if I were a mind reader :)
source to share
Ok, HTML.ActionLink in ASP.NET MVC creates anchor tags (A, aka "links"). By default, A tags have the "inline" display style. This means that Bryan M's answer suits your needs. Just declare the line-height to be a height greater than or equal to the font size.
Another option is to change the display style to "inline block", which will allow you to set an explicit height and width. This is useful if you want all 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 special FireFox 2 syntax. FF3 doesn't have this problem.
It might help to read the current CSS standard (2.1) which you can find at the W3C . You may be interested in the Formatting Models section .
source to share
To apply size and / or padding to an object, it must be a block-level element, not an inline element. <span> s are inline elements and are not very suitable for things like a list of tags. Try something like this:
<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 capable of padding and padding for each element. I also took the liberty of adding the: hover style and removing the ":" (the blue outline just to show you the size of the list itself). Let it spin, hope you enjoy the results, and good luck with your project!
source to share