Блог

Главная - Вопросы по программированию - Почему мои простые поля CSS не сворачиваются?

Почему мои простые поля CSS не сворачиваются?

#html #web #margin #css

#HTML #веб #поля #css

Вопрос:

Я всегда слышал, что поля в CSS сворачиваются, когда находятся рядом друг с другом, так что настройка двух элементов на 40 пикселей по всему периметру приведет только к 40 пикселям между ними.

Это старый способ рендеринга CSS, то есть он больше так не работает?

Это HTML и CSS. Кажется, я не могу заставить поля сворачиваться:

     <div id="header">
        <div id="mainNav" class="navBar">
            <a id="homeLink" class="navBarLinks">Home</a>
            <a id="aboutLink" class="navBarLinks">About</a>
            <a id="articlesLink" class="navBarLinks">Articles</a>
            <a id="portfolioLink" class="navBarLinks">Portfolio</a>
            <a id="contactLink" class="navBarLinks">Contact</a>
            <a id="rssLink" class="navBarLinks">RSS</a>
        </div>
        <div class="infoBar"></div>
    </div>
  
     #header { width: 100% }
    .navBar {
        width: 100%;
        height: 24px;
        background-color: #1a1a1a;
        border: 0px solid #404040
    }
    #mainNav { border-bottom-width: 2px }
    .navBarLinks {
        display: block; float: left;
        height: 11px;
        margin: 0 30px;
        background: url(/images/STORMINKsprite.png) no-repeat;
        text-indent: -9999px
    }

Комментарии:

1. Что не так с этим текстовым отступом: -9999px? Мне любопытно.

2. Все ссылки .navBarLinks заменены спрайтами, но я хочу, чтобы текст был там для обеспечения доступности и роботов, поэтому я просто делаю отступ от страницы. Я думаю, это стандартно? или я использую какой-то архаичный метод?

3. я тоже.. похоже, это часть какой-то более крупной html-страницы…

4. @theIV — Это метод замены изображений, известный как «Метод Phark», и это, вероятно, самый популярный способ сделать то, что задумал Ян, по крайней мере, для замены нетекстовых изображений.

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

Ответ №1:

Ваш ответ можно найти в рекомендации по спецификации CSS2.1:

В CSS 2.1 горизонтальные поля никогда не сворачиваются.

Итак, учитывая написанный вами код, вы получите 60 пикселей между каждой ссылкой — 30 пикселей для поля каждого элемента.

Что вы, вероятно, захотите сделать, так это использовать горизонтальные поля размером 15 пикселей, а затем добавить 15 пикселей горизонтального отступа к содержащему элементу.

Ответ №2:

Я не знаю, что в настоящее время происходит в IE, но если вы разместите два элемента и margin-right: 30px; на первом и margin-left: 30px; на втором, между ними будет 60 пикселей. Итак, я считаю, что он не сворачивается.

Ответ №3:

Если у вас есть 2 элемента с полем 40 пикселей со всех 4 сторон, то разрыв между этими двумя элементами будет равен 80 пикселям.