seodon.ru | Примеры HTML и CSS
Опубликовано: 12.05.2011 Последняя правка: 08.12.2015
Как убрать отступы HTML-элемента, которые браузеры устанавливают по умолчанию? Подобный вопрос часто возникает у начинающих верстальщиков, которые хотят убрать подобные отступы у таких элементов, как <UL>, HTML-таблицы (тег <TABLE>) и их ячейки и т.д. На самом деле нет ничего проще, но сначала давайте разберемся, а отступы ли вы имеете в виду, когда ищете ответ на этот вопрос?
В CSS есть два типа свойств, которые отвечают за отступы (CSS padding) и поля (CSS margin) элементов. Их расположение показано на следующем изображении:
Так вот, когда многие новички говорят о том, что хотят убрать у элемента отступы, то на самом деле они имеют в виду его поля, так как именно их обычно добавляют браузеры к некоторым элементам. Нет, отступы, конечно, тоже добавляются, но таких элементов очень мало, например, у тегов <INPUT> и <BUTTON> браузеры устанавливают ненулевые отступы, чтобы текст на кнопках не прилегал к рамке вплотную.
Немного иначе обстоит дело у HTML-таблиц, так как у них есть еще два параметра — это свойство CSS border-spacing, изменяющее расстояние между границами или рамками ячеек (которое тоже можно назвать отступами) и CSS border-collapse, которое вообще убирает это расстояние и делает границы общими. На изображении ниже показано размещение всех этих полей и отступов у таблицы.
На что здесь надо обратить внимание. Ну, во-первых, для ячеек таблиц не существует полей в обычном понимании, вместо них используется border-spacing, во-вторых, у тега <TABLE> имеются и поля, и отступы, как у обычного HTML-элемента. Ну и, в-третьих, отступ от внутреннего края таблицы до ячеек складывается из размера внутреннего отступа таблицы, к которому прибавляется размер расстояния между ячейками.
Ну что ж, а теперь, когда вы все это знаете — рассмотрим несколько примеров.
Как убрать отступы по краям HTML-страницы
Пример HTML и CSS: убираем отступы у тега BODY
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Убираем отступы по краям страницы</title> <style type="text/css"> body { margin: 0; /* убираем поля тега BODY */ } p { margin: 0; /* убираем поля параграфов */ } </style> </head> <body> <p>Содержимое страницы.</p> </body> </html>
01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Убираем отступы по краям страницы</title>
<style type="text/css">
body {
margin: 0; /* убираем поля тега BODY */
}
p {
margin: 0; /* убираем поля параграфов */
}
</style>
</head>
<body>
<p>Содержимое страницы.</p>
</body>
</html>Результат примера
Описание примера
Как вы уже поняли, у тега <BODY> браузеры устанавливают не отступы, а внешние поля, которые мы и убрали. Заодно были убраны поля у параграфа, чтобы хорошо было видно, как текст прилегает к самому краю HTML-страницы.
Как убрать отступы у HTML-тегов UL и LI
Пример HTML и CSS: убираем отступы у списка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Убираем отступы у тегов UL и LI</title> <style type="text/css"> body { margin: 0; } ul, li { list-style: none; /* убираем маркеры списка */ padding: 0; /* убираем отступы у Ul и LI */ margin: 0; /* убираем поля */ } </style> </head> <body> <ul> <li>Ниф-Ниф</li> <li>Нуф-Нуф</li> <li>Наф-Наф</li> </ul> </body> </html>
Результат примера
Описание примера
Для визуального оформления списков, все популярные браузеры устанавливают поля и отступы у тега <UL>, причем поля они ставят только сверху и снизу (как у параграфов), а внутренний отступ только слева, чтобы отодвинуть вправо элементы списка. Однако для надежности поля и отступы были убраны и у тега <LI>, на тот случай, если какой-то браузер решит вести себя не так, как все. Кстати подобный подход называется сбросом CSS, можете почитать.
Как убрать отступы у таблицы
Пример HTML и CSS: убираем отступы между ячейками таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1</td><td>Ячейка 1.2</td></tr> <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr> </table> <div>Третья таблица</div> <table> <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr> <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr> </table> </body> </html>
01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Убираем отступы у HTML-таблицы</title>
<style type="text/css">
body {
margin: 0;
}
table {
border: 5px #000 solid; /* рамка вокруг таблиц */
}
td {
border: 2px #000 solid; /* рамка вокруг ячеек */
}
#table2 {
border-collapse: collapse; /* делаем у второй таблицы общие границы ячеек */
}
#table3 {
border-spacing: 0; /* у третьей таблицы обнуляем расстояние между ячейками */
}
</style>
</head>
<body>
<div>Первая таблица</div>
<table>
<tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td></tr>
<tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td></tr>
</table>
<div>Вторая таблица</div>
<table>
<tr><td>Ячейка 1.
Результат примера
Описание примера
Для большей наглядности, к таблицам и ячейкам были добавлены рамки. К первой таблице я не стал применять какие-то специальные стили, чтобы вы увидели, что браузеры по умолчанию не добавляют таблицам ни поля, ни отступы, а только задают небольшое расстояние между ячейками. Вот его мы и будем убирать.
Ко второй таблице было применено свойство CSS border-collapse:collapse, чтобы границы у соседних ячеек стали общими. А вот в третьей — расстояние между ячейками было просто обнулено, но их границы (рамки) остались на своих местах, это очень хорошо видно по характерному утолщению рамок.
Естественно на самом деле никакого утолщения не произошло, просто рамки в таблице «прильнули» друг к другу.
В общем, как видите, оба этих способа помогают убрать отступы в таблице, просто делают это немного по-разному.
Элемент inline — пять способов убрать отступ – Zencoder
При оборачивании изображения в блок div внизу картинки возникает странный отступ.
Появляется он потому, что элемент img является строчным inline. При верстке часто возникает задача его убрать, так как он лишний и только портит дизайн. Решений данного вопроса существует несколько.
С тремя из них я был уже знаком благодаря замечательному ресурсу для верстальщиков — IMG внутри блока — убираем странный отступ.
Пять способов убрать отступ под картинкой
Создаем блок div с классом .image, для которого назначаем ширину, центрирование и границу для наглядности. Внутрь блока div.image помещаем картинку:
<div> <img src="img/charlize_theron.
jpg" alt="Charlize Theron">
</div>.image {
border: 2px solid #000;
width: 307px;
margin: 0 auto;
}Видим этот отступ под изображением:
И пробуем пятью различными способами убрать этот отступ.
1. Сделать элемент img блочным
.block {
display: block;
}2. Задать вертикальное выравнивание
Так как элемент img является строчным inline, то к нему применимо свойство vertical-align, как к любому строчному элементу. Мне такой способ нравиться больше всего:
.vertical {
vertical-align: top;
}3. Сделать элемент плавающим через float
Задать для элемента img свойство float: left или float: right. Если элемент делается плавающим через float, то из строчного inline он становится блочным block.
И отступ также пропадает. Только надо не забыть добавить для контейнера div.
image свойство overflow: hidden, иначе пропадет граница вокруг изображения.
Что и понятно, так как при float: left или float: right элемент “вырывается” из общего потока, становится плавающим:
.float {
float: left;
}4. Сделать картинку таблицей
Для изображения задать свойство display: table:
.table {
display: table;
}5. Задать высоту для блока
Для блока-контейнера div.image жестко задать высоту, равную высоте изображения. В моем случае высота картинки равна 230 пикселей, поэтому и для блока-обертки задаю такую же — 230 пикселей:
.height {
height: 230px;
}Все пять способов проверены мною и должны работать в реальности.
На это все.
cssinline
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:{% highlight typescript %}public trackByNumber = (_:.
..… Continue reading
ESLint: TypeError: this.libOptions.parse is not a function
Published on September 13, 2022Ubuntu — проблема с KVM Switch
Published on September 12, 2022Удалить все отступы и поля таблицы HTML и CSS
спросил
Изменено 5 месяцев назад
Просмотрено 387 тысяч раз
У меня есть эта таблица:
<тело>
<таблица>
свое имя
<тд>1
2
а вот css
html, body, #page {
высота:100%;
ширина:100%;
маржа: 0;
заполнение: 0;
}
# заголовок {
маржа: 0;
заполнение: 0;
высота: 20 пикселей;
цвет фона: зеленый;
}
, и я хочу удалить все поля и отступы, но всегда у меня есть это:
Как я могу решить эту проблему?
- css
- html-table
- margin
- padding
Попробуйте использовать этот CSS:
/* Примените это к элементу table.
*/
#страница {
граница коллапса: коллапс;
}
/* И это к элементам `td` вашей таблицы. */
#страница тд {
заполнение: 0;
маржа: 0;
}
1
Попробуйте это:
таблица {
интервал между границами: 0;
граница коллапса: коллапс;
}
2
Использовать блок отображения
style= "display: block";
Таблицы являются нечетными элементами. В отличие от div у них есть особые правила. Добавьте атрибуты cellpacing и cellpadding , установите значение 0 , и это должно решить проблему.
<граница таблицы = "0" Cellspacing = "0" CellPadding = "0">
1
Попробуйте использовать тело тега, чтобы удалить все необходимые поля и отступы.
<тело>
Вам нужно попробовать это:
