Як прибрати відступи HTML-елемента CSS: Прибираємо відступи у списку посилань Як зменшити відступ у маркованому списку

У цій статті я хотів би розповісти, як правильно розставляти поля(Padding) та відступи(margin) у CSS.

Перш за все давайте згадаємо визначення полів та відступів згідно специфікації W3C. У боксовій моделі (box model) поля – це відстань між контентом (content) та межею блоку (border). А відступи це відстань між кордоном блоку та кордоном сусіднього чи батьківського елемента.

Таким чином, якщо межа та фон елемента не задані, то немає різниці, використовувати властивість padding або margin для завдання відступів, але за умови, що ширина (width) та висота (height) елемента не задані та не змінено алгоритм розрахунку розмірів контенту за допомогою властивості box-sizing.

У будь-якому випадку слід пам'ятати, що поля можуть бути включені в ширину або висоту елемента, так і немає. Відступи завжди задаються зовні елемента.

Тепер давайте розглянемо як правильно розставляти поля та відступи між елементами. Візьмемо як приклад наступний блок.

Це блок новин news. Він складається із заголовка, списку новин та посилання «Інші новини». Дамо їм такі назви класів: news__title, news__list та news__more-link.

Оскільки кожен з цих елементів має однакові відступи ліворуч і праворуч, то краще задати поля батьківському блоку, а не ставити відступи ліворуч і праворуч для кожного елемента окремо.

News ( padding: 20px 25px; )

Таким чином, при необхідності змінити значення полів праворуч і ліворуч це потрібно буде зробити в одному місці. А при додаванні нового елемента всередину блоку новин, він вже матиме потрібні відступи зліва та справа.

Часто буває так, що всі елементи всередині блоку мають однакові відступи ліворуч і праворуч, крім одного, який взагалі не повинен мати відступів, наприклад, через тло. В цьому випадку для елемента можна задати негативні відступи. Тоді не доведеться прибирати поля всередині блоку для решти елементів.

Тепер потрібно встановити вертикальні відступи між елементами. Для цього слід визначити який із елементів є обов'язковим. Очевидно, що блок новин не може існувати без списку новин, в той же час посилання «Інші новини» може і не бути, заголовок теж може бути прибраний, наприклад, при зміні дизайну.

Враховуючи це, задаємо для заголовка відступ знизу, а для посилання «Інші новини» відступ зверху.

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

Ми могли б досягти такого самого зовнішнього результату, додавши відступи зверху та знизу для списку новин.

News__list ( margin: 10px 0 12px 0; )

Тепер потрібно поставити відступи між окремими новинами. Знову ж таки, потрібно взяти до уваги, що кількість новин може змінюватися, і у списку може бути лише одна новина.

Можна задати для кожної новини крім першої відступ зверху або для кожної новини крім останньої відступ знизу. Перший варіант більш кращий, оскільки псевдоселектор: first-child був доданий у специфікації CSS 2.1 і має більш широку підтримку, на відміну псевдоселектора: last-child, який був доданий тільки у специфікації CSS версії 3.0.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Таким чином, правильне розміщення полів та відступів дозволяє гнучко змінювати зовнішній вигляд будь-якого блоку без внесення змін у стилі та без порушень у дизайні. Найголовніше - визначити, які елементи блоку є основними ( обов'язковими), а які опціональними.

Іноді ми можемо спиратися на обов'язкові елементи. Наприклад, у нас є спливаюче віконце popup, всередині якого може виводитися якийсь заголовок та текст. Причому в якихось випадках може бути тексту, а якихось і заголовка. Тобто обидва елементи опціональні.

У цьому випадку можна використовувати наступний спосіб завдання відступів.

Popup__header + .popup__text ( margin-top: 15px; )

Тоді відступ з'явиться тільки якщо будуть використовуватися обидва елементи. У разі ж виведення лише заголовка або лише тексту, зайвого відступу не буде.

Схлопування вертикальних відступів

Ще один нюанс, про який не всі знають, пов'язаний із вертикальними відступами між сусідніми блоками. У визначенні відступів, яке я наводив вище, сказано, що відступ - це відстань між кордонамипоточного та сусіднього блоку. Таким чином, якщо ми розташуємо два блоки один під одним і поставимо одному з них відступ знизу в 30px, а іншому відступ зверху в 20px, відступ між ними буде не 50px, а 30px.

Тобто відбудеться накладення відступів, і відступ між блоками дорівнюватиме найбільшому відступу, а не сумі відступів. Цей ефект також називають «схлопування».

Прошу зауважити, що горизонтальні відступи, на відміну від вертикальних, не «схлопуються», а підсумовуються. Поля (padding) також підсумовуються.

Знаючи про «схлопування» відступів, ми можемо використати цю особливість на свою користь. Наприклад, якщо нам необхідно розставити відступи для заголовків і тексту всередині статті, то для заголовка першого рівня зададимо відступ знизу в 20px, а для заголовка другого рівня відступ зверху 20px і знизу 10px, а для всіх параграфів зададимо відступ зверху 10px.

H1 ( margin-bottom: 24px; ) h2 ( margin-top: 24px; margin-bottom: 12px; ) p ( margin-top: 12px; )

Тепер заголовок h2 можна розмістити як після заголовка h1 так і після параграфа. У будь-якому випадку відступ зверху не перевищуватиме 24px.

Загальні правила

Підводячи підсумок, я хотів би перерахувати правила, яких я дотримуюся при розміщенні полів і відступів.

1. Якщо сусідні елементи мають однакові відступи, краще задавати їх батьківському контейнеру, а не елементам.
2. При заданні відступів між елементами, слід враховувати, чи це обов'язковий елемент або опціональний.
3. Для списку однотипних елементів - не забувати про те, що кількість елементів може змінюватись.
4. Пам'ятайте про накладення вертикальних відступів і використовуйте цю особливість там, де вона принесе користь.

При створенні блоку зі списком посилань рекомендується використовувати властивість display з атрибутами block або inline-block , що дозволить збільшити розмір активного поля посилання. Великі активні поля посилань покращують юзабіліті елементів, з великих елементів простіше потрапити мишею.

Елементи з display: block відображається як блоковий.

Елемент із display: inline-block відображається як блоковий елемент, який обтікається іншими елементами, як вбудований. Вміст відформатовано як блоковий елемент, а сам елемент відформатовано як вбудований.

Розглянемо простий приклад зі списком посилань:

• This little
• piggy went to
• market

Якщо не змінювати стиль посилань, розмір їх активних полів відповідаю розміру тексту всередині них.

Ми можемо це покращити, зробивши розмір активного поля шириною батьківського елемента.

Ul a ( display: block; )

Ми можемо зробити ще краще.

1. Переконайтеся, що елементи списку не мають поля, на відміну від посилань.
2. Посилання не мають зовнішніх відступів, оскільки ці відступи не є активною областю елементів.

ul li ( padding: 0; margin: 0; ) ul a ( padding: 5px; display: block; )

Стаття і складається з очевидних речей, але ми досить часто можемо зустріти на просторах інтернету блоки посилань, не «спотворені» збільшеними активними полями.

Оригінал статті: Keep Margins Out of Link Lists By: Chris Coyier on 11/29/2010

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Абзац 1.10.32 "de Finibus Bonorum et Malorum", написаний Цицероном у 45 році н.е. "Сід ут особливістю для омніс є натхнення, що викликає voluptatem accusantium doloremque laudantium, totem rem aperiam, будь-яка ipsa quae ab illo inventore veritatis et casi architecto beatae vitae dict sunt extabo. Nemo enim ipsam consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. , Чистий простір exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Англійський переклад 1914 року, H. Rackham "Бути мушу висловитися до вас, як все це пом'якшення думок про розгортання pleasure і тягнуться язик був шпилькою і я буду вести вас до кінця системи, і розповсюдження сучасних досліджень з великого explorer truth, master-builder human happiness.No 1 rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that a. будь-який, хто love або pursues або desires to obtain bolest of itself, because it is pain, але because occasionally circumstances occur in which toil and pain can procure him some great pleasure. except to obtain some advantage from it? Але хто має будь-яку праву до того, щоб боротися з людиною, яка збирається на приємність для того, щоб мати на увазі те, що немає ніяких наслідків, або одне, що ведеться на болтку, що не має ніякого обов'язку?" Абзац 1.10.33 "de Finibus Bonorum et Malorum", написаний Цицероном у 45 році н.е. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem Nam libero tempore, cum soluta nobis est triendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Itaque earum rerum має хитрощі на сапенто delectus, в авт реічендіс voluptatibus maiores alias consequatur авт perferendis doloribus asperiores repellat." Англійський переклад 1914 року, H. Rackham "On the hand, we denounce with righteous indignation and dislike men who are se beguiled and demoralized by the charms of pleasure of the moment, is blinded by desire, that they cannot foresee the pain Це означає, що я маю на увазі, і подібні блакитні білизни до тих, хто нестерпний в їхній суті через weakness of will, which is the same as saying through shrinking from toil and pain. Коли наша влада є безперервною і якщо немає наслідків нашої волі, щоб зробити, щоб бути кращим, будь-який з'явиться, щоб бути щасливим і будь-якою язиком звільнено. frekvently occur that pleasures have to be repudiated and annoyances acepted.

Серед переваг, що рідко обговорюються, CSS-можливість накладання фонових зображень з метою отримання різних ефектів. Відповідно до стандарту CSS2, для кожного фонового зображення потрібен окремий HTML елемент. Найчастіше, типовий код, описує загальноприйняті компоненти інтерфейсу, надає у наше розпорядження кілька HTML елементів. Один з таких випадків – навігація на основі закладок. Настав час повернути контроль над закладками, популярність яких як основний засіб навігації постійно зростає. А тепер завдяки широкій підтримці CSS ми можемо покращити якість та зовнішній вигляд закладок на наших сайтах. Ви, швидше за все, вже в курсі, що CSS можна використовувати для «приручення» простого ненумерованого списку. Можливо, ви навіть бачили списки з дизайном у вигляді закладок, які виглядають приблизно так: А що якби ми могли взяти код точно з попереднього прикладу і перетворити закладки на щось схоже на це: За допомогою нескладного CSS це можливо. У чому новація? Багато з CSS-закладок, що мені зустрічалися (закладки, засновані на CSS) страждають одноманітністю свого дизайну: кольорові прямокутники, можливо з обведенням, поточна закладка без обведення, колір змінюється для стану hover. Невже це все, що CSS може нам запропонувати? Декілька прямокутників з одноколірною заливкою? Перед тим як CSS набув широкого поширення, у навігаційному дизайні з'явилося багато нових ідей: химерні форми, майстерні переходи кольору, імітування інтерфейсів із реального світу. Такий дизайн, однак, ґрунтувався великою мірою на складних конструкціях із растрованого тексту та багаторазово вкладених таблиць. Редагування тексту або зміна послідовності розміщення закладок були обтяжливою справою. Масштабування тексту було неможливим або призводило до серйозних проблем у композиції сторінки. Навігація з простого тексту легка в редагуванні та завантажується значно швидше, ніж навігація на основі растрованого тексту. Крім того, хоча ми і можемо додати атрибут alt для кожного зображення, простий текст, все ж, більшезагальнодоступний, оскільки може бути масштабований. Тому не дивно, що навігація на основі простого тексту повертається до веб-дизайну. Однак зовнішній вигляд CSS-закладок досі був кроком назад у дизайні, і звичайно зовсім не тим, що можна включити в дизайн-портфоліо. Нові технології (як, наприклад, CSS) повинні дозволити створювати щось краще і з такою самою якістю дизайну, що давало використання таблиць та закладок на основі растрових зображень. Метод «Розсувних дверей» Ми можемо створити красиві, дійсно гнучкі елементи інтерфейсу, які розширюються та звужуються залежно від розміру тексту, використовуючи два окремі фонові зображення. Одне-для лівої частини закладки, інше-для правої. Уявіть, що ця пара картинок-розсувні двері, що закривають один дверний отвір. Ці двері зсуваються і перекриваються більше, якщо дверний отвір вузький, і навпаки, розсуваються і перекриваються менше, якщо потрібно закрити ширший простір. Це показано на ілюстрації: Відповідно до цієї моделі одне зображення перекриває частину іншого. Якщо припустити, що по краях наших картинок є щось унікальне, як, наприклад, закруглений кут закладки, ми навряд чи захочемо, щоб одна картинка повністюзакривала іншу, що була позаду. Щоб цього не сталося, ми зробимо передню (у нашому випадку ліву) картинку якомога вужчою. Але при цьому картинка має бути достатньо широкою, щоб збереглася її видима унікальність. У нашому випадку унікальними є заокруглені кути, тому передня картинка буде шириною з цією округленою частиною зображення: Якщо розмір закладки збільшиться в результаті, наприклад, масштабування тексту, наші картинки розійдуться в сторони, оголивши неприємний розрив. Отже, слід оцінити масштаб прийнятного розширення. Як сильно збільшити об'єкт під час масштабування тексту в браузері? Реально слід розраховувати можливість збільшення до 300%. Щоб компенсувати зростання, потрібно розтягнути фонові зображення. У нашому прикладі, ми зробимо задню картинку (правий бік) розміром 400х150 пікселів, а передню - 9х150 пікселів. Не забувайте, що фонові зображення видно лише у «дверному отворі» елемента, до якого вони застосовані («дверний отвір»-область контенту + відступ). Обидві наші картинки прикріплені до зовнішніх кутів відповідних елементів. Видимі частини цих зображень об'єднуються всередині дверного отвору і утворюють форму закладки: Коли закладка збільшується, зображення розсуваються, заповнюючи ширший проріз, при цьому видима область зображень також стає більшою: Для нашого прикладу я створив у Photoshop два зображення з м'яким, що імітує тривимірність , тонуванням Для однієї із закладок я висвітлив заливку і затемнив обведення - цей варіант буде представляти «поточну» закладку. поточної закладки Отримавши таким чином всі 4 зображення, (1, 2, 3, 4) ми можемо приступити до створення коду та CSS для наших закладок Створення закладок У міру знайомства зі створенням горизонтальних списків за допомогою CSS ви помітите щонайменше два способи розташування групи об'єктів в один ряд, кожен має свої переваги і недоліки, обидва вимагають звернення до досить складних аспектів CSS, в результаті можна швидко заплутатися. Перший спосіб використовує малі елементи, другий-властивість float. Перший спосіб - можливо більш поширений - передбачає зміну якості display на "inline" (малий). «Рядковий» метод привабливий своєю простотою. Однак він призводить до проблем у реалізації нашого методу Розсувних дверейу деяких браузерах. Другий спосіб, на якому ми і зосередимо нашу увагу, використовує плаваюча модель для вибудовування елементів списку горизонтальний ряд. Плаваюча модель, однак, також може розчарувати. Її суперечлива поведінка часом порушує всю логіку. Але все ж таки загальне розуміння того, як справлятися з декількома плаваючими елементами і знання надійних способів «виходу» з плаваючого ряду (або його укладання в контейнер) може створити дива. Ми спробуємо помістити декілька плаваючих елементів всередину іншого плаваючого елемента-контейнера. Це треба зробити так, щоб зовнішній батьківський плаваючий елемент повністю оточив внутрішні плаваючі елементи. Тоді ми зможемо додати за нашими закладками фоновий колір або фонове зображення. Важливо пам'ятати, що положення наступного за закладками елемента має бути відновлено за допомогою clear CSS-властивості. Тоді плаваючі закладки не можуть впливати на розташування інших елементів сторінки. Почнемо з наступного коду: · Home · News · Products · About · Contact На практиці блок #header міг би містити, наприклад, ще логотип та форму для пошуку. У прикладі ми скоротимо значення href кожної посилання до “#”. Зрозуміло, що в реальному житті замість цього значка буде вказано шлях до файлу або папки. Почнемо роботу з CSS із присвоєння якості float контейнеру #header. Це дає гарантію того, що контейнер насправді «вміщує» елементи списку, які також будуть плаваючими. Так як ми зробили #header плаваючим, нам потрібно привласнити йому ширину 100%. Ми також додамо тимчасове жовте тло, щоб переконатися, що цей батьківський елемент розтягується на всю ширину позаду закладок. Ну і нарешті задамо кілька основних шрифтових властивостей, щоб забезпечити єдність зовнішнього вигляду елементів: #header ( float:left; width:100%; background:yellow; font-size:93%; line-height:normal; ) значення для полів та відступів елементів ul та li та приберемо маркер списку. Для всіх елементів списку напишемо оголошення float:left: #header ul (margin:0; padding:0; list-style:none; ) #header li (float:left; margin:0; padding:0; ) блокове відображення з тим, щоб контролювати те, що відбувається, не турбуючись про малу модель: #header a ( display:block; ) Потім ми додамо наше праве фонове зображення до елемента списку (зміни та додавання показані напівжирним шрифтом): #header li ( float:left background:url("norm_right.gif") no-repeat right top; (Не звертайте уваги на правило, яке я застосував до елемента body у файлі прикладу. Воно лише задає основні значення для полів, відступів, кольорів та тексту.) - - - Тепер ми можемо розмістити ліве зображення попереду правого, застосувавши його до посилання (нашого внутрішньому елементу). Відразу ж додамо відступ, щоб відсунути текст від країв закладки: #header a (display:block; background:url("norm_left.gif") no-repeat left top; почали набувати форми. У цьому місці звернемося до збентежених користувачів IE5/Mac, які запитують себе: «Що тут взагалі відбувається? Закладки складені у вертикальну стопку та розтягнуті по ширині на весь екран.» Не турбуйтесь, скоро дійдемо і до вас. А поки просто стежте за тим, що відбувається, або тимчасово перейдіть на інший браузер і будьте впевнені-скоро ми вирішимо проблему IE5/Mac. - - - Тепер, коли картинки для простих закладок посіли своє місце, задамо зображення для поточної закладки. Зробимо це, звернувшись до елемента списку з id="current" та посилання всередині нього. Оскільки ми не змінюємо жодних властивостей фону, крім фонових зображень, будемо використовувати властивість background-image: #header #current ( background-image:url("norm_right_on.gif"); ) #header #current a ( background-image:url( "norm_left_on.gif");)) У нижній частині наших закладок нам потрібна якась обведення. Але застосування властивості border до батьківського #header не дозволить нам «просочити» поточну закладку через цей кордон. Натомість ми створимо нове зображення з потрібним нам обведенням по його нижньому краю. І доки ми працюємо з цим зображенням, додамо легкий градієнт, щоб це виглядало так: Ми застосуємо це зображення до фону нашого контейнера #header (замість заданого раніше жовтого кольору), посунемо його вниз контейнера і призначимо фоновий колір, що збігається з верхнім кольором створеного градієнта . Ми також приберемо доданий спочатку відступ для елемента body і додамо відступ у 10 пікселів до верхньої, лівої та правої частин елемента ul: #header ( float:left; width:100%; background:#DAE0D2 url("bg.gif") repeat -x bottom;font-size:93%;line-height:normal;) #header ul (margin:0; padding:10px 10px 0; list-style:none; через кордон, про що ми вже говорили вище. Ви можете подумати, що ми застосуємо до наших закладок нижню межу, яка збігається за кольором з нижньою обведенням фонового зображення елемента #header, а потім змінимо колір кордону для поточної закладки на білий. Однак це призвело б до появи крихітної сходинки, видимої для уважного ока. А ось якщо ми змінимо відступ для посилань, ми зможемо створити чіткі та прямі кути всередині поточної закладки, як показано на збільшеному малюнку: Ми досягнемо цього, зменшивши нижній відступ для звичайного посилання на 1 піксель (5px - 1px = 4px), а потім додавши цей піксель до поточного посилання: #header a ( display:block; background:url("norm_left.gif") no-repeat left top; padding:5px 15px 4px; ) #header #current a ( background-image:url(" norm_left_on.gif"); padding-bottom:5px; ) Ця зміна робить нижню межу видимою крізь звичайні закладки, але ховає її для поточної закладки. Ми отримуємо приклад 3. Заключні кроки Уважний погляд міг помітити у попередньому прикладі білі ділянки по кутах закладок. Ці непрозорі куточки заважають задньому малюнку бути видимим через лівий кут переднього зображення. Теоретично ми могли б зробити ці куточки такого ж кольору, як і фон позаду них. Але наші закладки можуть збільшитись по висоті, і тоді заднє градієнтне фон зрушить униз, що призведе до неузгодженості кольору куточків та фонового градієнта. Натомість ми змінимо наші картинки, зробивши їх куточки прозорими. Якщо до обведення закладок застосовано згладжування (anti-aliasing), ми задамо як прозорий колір (matte) середнє значення заднього фонового градієнта. Тепер, коли куточки є прозорими, шматочок правого зображення проглядається через прозорий кут лівого. Щоб уникнути цього, додамо невеликий лівий відступ до списку, що дорівнює ширині лівого зображення (9px). Щоб зберегти центрування тексту після додавання відступу до елемента списку, необхідно забрати таку ж величину лівого відступу у посилання (15px - 9px = 6px): #header li (float:left; background:url("right.gif") top; margin:0; padding:0 0 0 9px; ) #header a ( display:block; background:url("left.gif") нас не влаштує, тому що ліва картинка тепер відсунута від лівого краю закладки на 9 пікселів доданого відступу. Тепер, коли внутрішні краї лівого та правого «дверних отворів» стикуються один з одним, нам більше не потрібно тримати ліву картинку попереду. І ми можемо змінити черговість фонових картинок, застосувавши їх до протилежних елементів. Ми також повинні змінити картинки і для поточної закладки: #header li (float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; ) #header a #header strong, #header span ( display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; ) #header #current ( background-image:url("left_on. gif"); ) #header #current a (background-image:url("right_on.gif"); padding-bottom:5px; ) Зробивши це, ми отримуємо приклад 4. Зауважте, що зроблені нами для створення прозорих кутів кроки призвели до появи невеликої «мертвої» зони в лівій частині закладки, де вона не реагує на наведення миші. Мертва зона знаходиться поза текстом, але вона все ж таки помітна. Прозорі картинки кожної сторони нашої закладки використовувати необов'язково. Якщо ми воліємо не мати на нашій закладці «мертвої» ділянки, потрібно лише використовувати позаду закладок суцільну заливку, а не градієнт, і зробити куточки закладок такого ж кольору. Поки що ми збережемо прозорість кутів. [ У IE/Win згадана «мертва» зона існувала і до вжитих кроків, причому з усіх боків від тексту посилання. Вирішення цієї проблеми висвітлено в статті серії Sliding Doors of CSS, Part II.-прим. перекладача ] - - - Ну і, нарешті, останні штрихи. Все за один раз: робимо весь текст напівжирним, текст на звичайних закладках коричневим, а на темно-сірому, цей же колір присвоюємо тексту для стану посилання hover, прибираємо підкреслення посилань. Всі зроблені до цієї хвилини додавання та зміни представлені в прикладі 5. Ще один метод для сумісності Розглянувши приклад 2, ми визнали наявність проблеми з IE5/Mac, який розтягував закладки на всю ширину вікна, вибудовуючи їх вертикально одна під одною. Не зовсім той ефект, якого ми досягаємо. У більшості браузерів застосування елемента властивості float тягне його стиск до мінімально можливого розміру, що визначається його контентом. Якщо плаваючий елемент містить картинку (чи сам є картинкою), він стиснеться до ширини картинки. Якщо він містить лише текст, то стиснеться до ширини найдовшого рядка тексту, що не містить переносів. Проблеми виникають у IE5/Mac, коли блоковий елемент з шириною auto поміщається всередину плаваючого елемента. В цьому випадку всі браузери стискають плаваючий елемент до мінімально можливої ​​ширини, не звертаючи уваги на внутрішній блоковий елемент. А ось IE5/Mac у описаній ситуації цього не робить. Натомість він розтягує плаваючий і внутрішній блоковий елементи на всю доступну ширину. Щоб обійти таку поведінку, нам потрібно застосувати float також і до посилання, але тільки для IE5/Mac, не торкаючись інших браузерів. Спочатку додамо float до вже існуючого правила. Потім застосуємо «Метод зворотного слеша», щоб сховати від IE5/Mac нове правило, яке видаляє float для інших браузерів: #header a (float:left; display:block; background:url("right.gif") верхній padding: 5px 15px 4px 6px; text-decoration: none; /* End IE5-Mac hack */ Відповідно до прикладу 6 IE5/Mac тепер відображає закладки як належить. Для решти браузерів нічого не змінилося. IE5/Mac містить величезну кількість CSS-багів, які були виправлені у версії IE5.1. Від цих багів в IE5/Mac страждає і метод «Розсувних дверей». Їхнє число перевершує всі мислимі межі, і я не збираюся з ними боротися. Оскільки оновлення до 5.1 вже досить тривалий час доступне для всіх бажаючих, відсоток Маків c OS 9 і встановленим IE5/Mac постійно скорочується і наближається до нуля. Варіанти Ми щойно детально розібрали метод «Розсувних дверей», який дозволяє створювати зверстану за допомогою ненумерованого списку та посилань та доопрацьовану за допомогою кількох правил CSS закладну навігацію на основі простого тексту. Така навігація швидко завантажується, проста у підтримці, а текст усередині неї може бути значно масштабований у будь-який бік без порушення дизайну. Чи варто говорити, наскільки гнучким є цей метод при створенні будь-якої навігації, що витончено виглядає? Використання цієї техніки обмежується лише нашою уявою. Заключний приклад ілюструє лише один варіант. Але цей приклад не повинен обмежувати наші ідеї. Закладки, наприклад, необов'язково мають бути симетричними. Я швидко створив другий варіант закладок, в якому використовував прості кольори, незграбні форми і ширшу і складнішу за формою ліву сторону. Як показує варіант 2, ми можемо вільно змінювати порядок лівого та правого зображень залежно від дизайну. При чіткому плануванні та майстерному поводженні з картинками, можна відмовитися від нижньої межі на користь стильового поєднання картинок з фоном, розташованим позаду, як показано у створеному варіанті 3. Якщо ваш браузер підтримує перемикання між альтернативними стилями, ви можете переглянути всі представлені варіанти, відкривши цей майстер-файл і перемикаючись у ньому між таблицями стилів. [ У NN7.1 доступ до альтернативних стилів здійснюється через головне меню View>Use Style, в Opera 7.20 через головне меню View>Style, в IE/Win такої можливості немає-прим. перекладача] До застосованої техніки можуть бути додані інші ефекти, які ми не розглядаємо. У нашому прикладі ми змінювали колір тексту для стану hover, але чому б не змінити фонове зображення повністю для отримання цікавих роловер-ефектів. За наявності коду двох вкладених HTML елементів ми завжди можемо використовувати CSS для накладання фонових зображень і отримання ефектів, про які ми й не мріяли. У нашому прикладі ми створили горизонтальний ряд закладок, але метод розсувних дверей можна використовувати і в багатьох інших випадках. Яке застосування цього методу запропонуєте ви?

Які браузери встановлюють за промовчанням? Подібне питання часто виникає у верстальників-початківців, які хочуть прибрати подібні відступи у таких елементів, як HTML-таблиці (тег) та їх осередки і т.д. Насправді немає нічого простішого, але спочатку давайте розберемося, а чи відступи ви маєте на увазі, коли шукаєте відповідь на це запитання?

У CSS є два типи властивостей, які відповідають за відступи (CSS) та поля (CSS) елементів. Їхнє розташування показано на наступному зображенні:

Так от, коли багато новачків говорять про те, що хочуть прибрати у елемента відступи, то насправді вони мають на увазі його поля, оскільки саме їх зазвичай додають браузери до деяких елементів. Ні, відступи, звичайно, теж додаються, але таких елементів дуже мало, наприклад, у тегів та браузери встановлюють ненульові відступи, щоб текст на кнопках не прилягав до рамки впритул.

Трохи інакша справа у HTML-таблиць, так як у них є ще два параметри - це властивість CSS, що змінює відстань між межами або рамками осередків (яку теж можна назвати відступами) і CSS, яке взагалі прибирає цю відстань і робить межі загальними. На зображенні нижче показано розміщення всіх цих полів та відступів у таблиці.

На що тут треба звернути увагу? Ну, по-перше, для осередків таблиць немає полів у звичайному розумінні, замість них використовується, по-друге, у тега є і поля, і відступи, як у звичайного HTML-елемента. Ну і по-третє, відступ від внутрішнього краю таблиці до осередків складається з розміру внутрішнього відступу таблиці, до якого додається розмір відстані між осередками.

Ну що ж, а тепер, коли ви все це знаєте, розглянемо кілька прикладів.

Як прибрати відступи по краях HTML-сторінки

Приклад HTML та CSS: прибираємо відступи у тега BODY

Вміст сторінки.

Опис прикладу

Опис прикладу

Для візуального оформлення списків, всі популярні браузери встановлюють поля та відступи біля тега , причому поля вони ставлять лише зверху та знизу (як у параграфів), а внутрішній відступ лише ліворуч, щоб відсунути праворуч елементи списку. Однак для надійності поля та відступи були прибрані і у тега, на той випадок, якщо якийсь браузер вирішить поводитися не так, як усі. До речі, подібний підхід називається скиданням CSSможете почитати.

Як прибрати відступи у таблиці

Приклад HTML і CSS: прибираємо відступи між осередками таблиці

Осередок 1.1	Осередок 1.2
Осередок 2.1	Осередок 2.2

Осередок 1.1	Осередок 1.2
Осередок 2.1	Осередок 2.2

Осередок 1.1	Осередок 1.2
Осередок 2.1	Осередок 2.2

Опис прикладу

Для більшої наочності до таблиць і осередків були додані рамки. До першої таблиці я не став застосовувати якісь спеціальні стилі, щоб ви побачили, що браузери за умовчанням не додають таблицям ні поля, ні відступи, а лише задають невелику відстань між осередками. Ось його ми і прибиратимемо.

До другої таблиці було використано властивість CSS :collapse, щоб кордони у сусідніх осередків стали загальними. А ось у третій - відстань між осередками була просто обнулена, але їх межі (рамки) залишилися на своїх місцях, це дуже добре видно з характерного потовщення рамок. Природно, насправді ніякого потовщення не відбулося, просто рамки в таблиці «припали» один до одного.

Загалом, як бачите, обидва ці способи допомагають усунути відступи в таблиці, просто роблять це трохи по-різному.