li css подложка. Подреждане на полета и подложки в CSS

Когато създавате блок със списък от връзки, обикновено се препоръчва да използвате свойството display с атрибутите block или inline-block, което ще увеличи размера на полето за активна връзка. Големите активни полета за връзки подобряват използваемостта на елементите; големите елементи са по-лесни за навигация с мишката.

Елементите с дисплей: блок се изобразяват като блокови елементи.

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

Нека да разгледаме прост пример със списък от връзки:

Това малко
прасенце отиде при
пазар

Ако не промените стила на връзките, тогава размерът на техните активни полета съответства на размера на текста в тях.

Можем да подобрим това, като направим размера на активното поле равен на ширината на родителския елемент.

Ul a ( дисплей: блок; )

Можем и по-добре.

Уверете се, че елементите от списъка нямат полета, за разлика от връзките.
Връзките нямат полета, тъй като полетата не са активната област на елементите.

ul li ( подложка: 0; поле: 0; ) ul a ( подложка: 5px; дисплей: блок; )

Статията се състои от очевидни неща, но доста често можем да намерим блокове от връзки в интернет, които не са „обезобразени“ от разширени активни полета.

Оригинална статия: Пазете полета извън списъците с връзки От: Chris Coyier на 29.11.2010 г.

Задача

Премахнете подложката около списъци с водещи символи или номерирани списъци.

Решение

Използвайте свойство за стил на марж и подложка с нулева стойност за селектора UL или OL, в зависимост от типа на списъка, както е показано в Пример 1.

Пример 1: Отстъп в списъка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Отстъп на списъка

Чебурашка
Крокодила Гена
Шапокляк

Резултатът от този пример е показан на фиг. 1.

Ориз. 1. Списък без вертикални и хоризонтални отстъпи

Забележете, че списъчните маркери, които се появяват извън левия край на уеб страницата, изчезват. За да премахнете само горното и долното поле, без да премествате списъка наляво, използвайте свойствата margin-top и margin-bottom (пример 2).

Пример 2: Отстъп в списъка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Отстъп на списъка

Чебурашка
Крокодила Гена
Шапокляк

Кои браузъри се инсталират по подразбиране? Подобен въпрос често възниква сред начинаещите дизайнери на оформление, които искат да премахнат такива отстъпи от елементи като HTML таблици (таг) и техните клетки и т.н. Всъщност няма нищо по-просто, но първо нека разберем: имате ли предвид вдлъбнатини, когато търсите отговора на този въпрос?

Има два типа свойства в CSS, които контролират подложките (CSS) и полетата (CSS) на елементите. Техните местоположения са показани на следното изображение:

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

Ситуацията е малко по-различна при HTML таблиците, тъй като те имат още два параметъра - CSS свойство, което променя разстоянието между границите или рамките на клетките (което също може да се нарече подложка) и CSS свойство, което премахва това разстояние напълно и прави границите общи. Изображението по-долу показва разположението на всички тези полета и подложки върху масата.

На какво трябва да обърнете внимание тук. Е, първо, за клетките на таблицата няма полета в обичайния смисъл, вместо това те се използват, и второ, етикетът има както полета, така и отстъпи, като обикновен HTML елемент. Е, трето, отстъпът от вътрешния ръб на таблицата до клетките се състои от размера на вътрешния отстъп на таблицата, към който се добавя размерът на разстоянието между клетките.

Е, сега, след като знаете всичко това, нека да разгледаме няколко примера.

Как да премахнете полета от краищата на HTML страница

Примерен HTML и CSS: премахване на отстъпи от тага BODY

уебсайт - Премахнете подложките по краищата на страницата

Съдържание на страницата.

Описание на примера

За визуално проектиране на списъци, всички популярни браузъри задават полета и отстъпи за етикета и задават полета само в горната и долната част (като абзаци) и само вътрешния отстъп отляво, за да преместят елементите на списъка вдясно. Въпреки това, за надеждност, полетата и подложките също бяха премахнати от етикета, в случай че някой браузър реши да се държи различно от всички останали. Между другото, този подход се нарича нулиране на CSS, можете да го прочетете.

Как да премахнете отстъпи от таблица

Пример за HTML и CSS: премахване на подложките между клетките на таблицата

уебсайт - Премахване на отстъпи от HTML таблица

Първа маса

Клетка 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 беше приложено към втората таблица, така че границите на съседните клетки станаха общи. Но в третия разстоянието между клетките просто беше нулирано до нула, но техните граници (рамки) останаха на мястото си, това се вижда много ясно от характерното удебеляване на рамките. Естествено, всъщност не се получи удебеляване; рамките в масата просто се „залепиха“ една за друга.

Като цяло, както можете да видите, и двата метода помагат за премахване на отстъпи в таблицата, те просто го правят малко по-различно.

Вградените блокове (inline-block) в много случаи са много удобен инструмент за маркиране. Примери за тяхното използване можете да намерите в статиите.

В същото време има клопка, свързана с тях. Дори бих казал цял калдъръм. искаш ли да го видиш Поставете няколко вградени елемента (или вградени блокове) в един ред.

Да кажем, че имаме този HTML:

Щърки.
Просто
линии

Правене на елементи с малки букви:

Li(дисплей:вграден; )

...или редови блокове:

Li( display:inline-block; /* Следващите два реда за IE6-7 - емулират поведението на вграден блок */ //display:inline; zoom:1; )

проблем

Повечето браузъри разделят вградените блокове (елементи) чрез отстъп. За по-лесно възприятие оцветих малко блоковете.

Опа! Какви вдлъбнатини? Не съм предписвал такова нещо!

Нека се съгласим, че по-нататък просто ще напиша „вграден блок“ и ще имам предвид „вграден блок ( :inline-block) или просто вграден елемент (display:inline)“, тъй като те имат напълно общ проблем и той също се третира в същото начин.

Кого лекуваме?

Така че вградените блокове вече имат мистериозни вдлъбнатини. Разбира се, това не се отнася само за списъците. Група, разположена в ред, например „ov“, ще се държи по същия начин.

За да бъдем честни, трябва да се отбележи, че IE6 и IE7 ще изобразят всичко без отстъп:

Ето как искам да се показват всички браузъри!

Няма да навлизаме в подробности по въпроса кой е прав и кой крив (прочетете - криво поддържа стандарти), просто ще постигнем съвместимост между браузъри. Много е удобно, когато поведението е предвидимо - не съм задал никакви отстъпи, което означава, че не е необходимо да ги рисувам!

Всъщност всичко е просто - за да премахнете отстъпите, трябва да разберете откъде идват!

Откъде идват вдлъбнатините?

И не е трудно за разбиране. Достатъчно е просто да напишете етикетите в един ред:

Щърки.
Просто
линии

Чудеса! Вдлъбнатините изчезнаха сами! Извод: генерират се от невидими знаци между таговете - сричко или интервал.

Разбира се, „записването на всичко на един ред“, въпреки че е решение на проблема с различни браузъри, не се разглежда тук по очевидни причини (кой пише без отстъпи?). Търсим други пътища.

Долу вдлъбнатините!

Тъй като вдлъбнатината се създава от знаци от контейнера, разумна идея би била тези знаци да се “неутрализират” - да се зададат на :0; (основното е да не забравяме, че това свойство е наследено и да го прекъснете за самите потомци):

Ul(размер на шрифта:0; ) li(размер на шрифта:14px; дисплей:вграден; )

Перфектно решение! Линейните блокове наистина са притиснати един към друг. Все още има малък козметичен проблем: в някои браузъри (например Opera 9.5 и по-стари) има вдлъбнатина в горната или долната част на родителя (родителят на снимката е запълнен с бледо сиво-зелено):

Картината е увеличена, така че да се виждат вертикалните отстъпи

Този проблем е подобен на описания в статията и се третира приблизително по същия начин: add :0; (отново не забравяйте да се припокриете с потомъка). Така получаваме:

Ul( font-size:0; line-height:0; ) li( font-size:14px; line-height:normal; /* или друга подходяща стойност */ display:inline; )

Сега всичко наред ли е? Не така!

Бедата дойде оттам, откъдето не очаквахме

Очевидно тези вдлъбнатини наистина трябва да са там! Има два железни аргумента в подкрепа на това:

IE6-7 не ги рисува;
Въпреки усилията ни, браузърите Webkit все още ги рисуват.

Да да! Както Safari, така и Chrome, след всички горни трикове, благоволиха просто да намалят подложката от три пиксела на един!

Упоритите уебкитове не искат да се отказват!

Актуализация 3.07.2011 г. от Ник. FF поднесе още една скрита изненада. Ако мащабирате страницата, понякога има допълнителна подложка от 1px в горната част. Това може да се излекува чрез добавяне на правилото за показване: -moz-inline-stack;

Окончателно решение

Беше възможно да победите webkit с помощта на :-1px, но не бяха открити вредни странични ефекти (освен ако, разбира се, не забравите да замените свойството в наследниците).

Краен CSS с кръстосано решение за вградени елементи:

Ul( font-size:0; /* премахване на хоризонталното разстояние */ line-height:0; /* ...и вертикално в някои браузъри */ letter-spacing:-1px; /* убеждаване на webkit */ ) li ( шрифт -size:14px; /* Не забравяйте да възстановите нормалните стойности */ line-height:normal; display:inline;

За вградени блокове:

Ul( font-size:0; /* премахване на хоризонтално разстояние */ line-height:0; /* ...и вертикално в някои браузъри */ letter-spacing:-1px; /* убеждаване на webkit */ ) li ( шрифт -size:14px; /* Не забравяйте да възстановите нормалните стойности */ line-height:normal; display: -moz-inline-block; // display:inline zoom:1 ;

Не забравяйте, че свойството zoom е невалидно. Следователно, в бойни условия, поставете го в отделен CSS, свързан с помощта на .

Може да е полезно да прочетете: