Как мне уменьшить размер тега

Question

Довольно плохо знаком с CSS и стараюсь уменьшить теги на моей странице со всех сторон. Какие настройки лучше всего изменить? Похоже, маржа не делает то, что я хочу.

.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;
}

Вот соответствующий фрагмент, я хочу сделать ссылки меньше по вертикали. Нужно ли тогда явно указывать высоту?

<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

Как уже упоминалось, если вы пытаетесь уменьшить вертикальную высоту встроенного элемента, верхнее или нижнее поле / отступ ничего не сделают. Однако вы можете попробовать уменьшить высоту строки текста:

 line-height: 12px;

Только не делайте высоту строки меньшим, чем font-size, иначе ваш текст может выглядеть обрезанным.

Answer 2

Это полностью зависит от того, что вы пытаетесь стилизовать. Это текстовый компонент, как абзац? Див?

Вы можете использовать ширину и высоту для деления.

 width:200px;
 height:20px;

и т.д.

Но нам нужен HTML, чтобы порекомендовать значимые решения.

Answer 3

Чтобы применить размеры и / или заполнение к объекту, это должен быть элемент уровня блока, а не встроенный элемент. s являются встроенными элементами и не очень подходят для таких вещей, как список тегов. Попробуйте что-то вроде этого:

<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>

Это даст вам семантически правильный «список» тегов, выровненных по левому краю и с возможностью давать отступы и поля для каждого элемента. Я также взял на себя смелость добавить стиль: hover и убрать ":" (синий контур только для того, чтобы показать вам размер самого списка). Окунитесь, надеюсь, вам понравятся результаты, и удачи в вашем проекте!

Answer 4

Хорошо, HTML.ActionLink в ASP.NET MVC создает якорные теги (A, или «ссылки»). По умолчанию теги A имеют стиль отображения «встроенный». Это означает, что ответ Брайана М подойдет вашим потребностям. Просто объявите высоту строки до высоты, которая больше или равна размеру шрифта.

Другой вариант - изменить стиль отображения на «встроенный блок», который позволит вам установить явную высоту и ширину. Это полезно, если вы хотите, чтобы все ваши теги были одинакового размера.

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

Обратите внимание на специальный синтаксис FireFox 2. FF3 не имеет этой проблемы.

Это может помочь прочитать текущий стандарт CSS (2.1) , который вы можете найти по адресу W3C . Возможно, вас заинтересует Раздел модели визуального форматирования , в частности.

Answer 5

Только из реальных имен классов похоже, что вы привязываете стиль к тегам в облаке тегов? если это так, я думаю, вы можете попробовать сделать ваш отступ немного меньше, возможно:

padding:3px;

Если они встроенные элементы, вам не повезет с полями.

Я мог бы сказать вам больше, только если бы был читателем разума:)

Answer 6

Кроме того, если вы применяете это к встроенному элементу, такому как A или SPAN, вы обнаружите, что вертикальные значения не применяются. Вы не даете нам достаточно контекста, чтобы мы могли разумно прокомментировать - попробуйте перейти на страницу, на которой показана проблема, и нам не придется угадывать решения для вас!

Answer 7

Я думаю, вы ищете прокладку. Я предполагаю, что вы хотите уменьшить расстояние между краем текста и местом, где цвет фона перестает заполняться (в основном), и тем, где начинается граница, и изменение отступов даст желаемый эффект.

Если вы хотите уменьшить размер шрифта, посмотрите на свойство font-size. Также посмотрите на свойство line-height.