Найчастіше для визначення розмірів відступів у HTML-сторінках використовують можливості мови CSS (Cascading Style Sheets - "Каскадні таблиці стилів"). Хоча і в самій мові HTML є кілька "рудиментарних" залишків, що дозволяють в деяких випадках задавати відступи. Нижче наведені варіанти, які використовуються найбільш часто, але крім них є ще досить багато різного роду хитрощів, які дозволяють задавати відступи при нестандартній розмітці HTML-документів.
Вам знадобиться
- Базові знання мов HTML і CSS
Інструкція
1. Визначте елемент сторінки, від якого слід відраховувати показ. Наприклад, якщо текст розміщено всередину теґу < div >... </div > (блок), батьківським елементом для цього тексту буде цей блок і відраховувати погляд потрібно від меж блоку. А якщо текст (або зображення) не знаходиться всередині будь-яких блокових (div, li тощо) або рядкових (span, p тощо) елементів, то його батьком буде тіло документа (тег body). Визначити батьківський елемент для тексту необхідно тому, що саме йому треба задавати описи стилів, що формують відступи. Будемо вважати, що текст у вас поміщений всередину блоку div:< div > Зразок тексту </div >
2. Використовуйте властивість margin мови CSS, щоб встановити зовнішні відступи, тобто відстань від меж елемента до сусідніх елементів, а також до меж батьківського елемента. Цю відстань можна задавати роздільно для відступу з кожного боку: margin-top - зверху, margin-right - праворуч, margin-bottom - знизу, margin-left - ліворуч. Для зразка, наведеного вище такий css-код може виглядати, наприклад, так:div { margin-top: 10px; margin-right: 15px; margin-bottom: 40px; margin-left: 70рх;} Тут "div" - це селектор, який вказує, що цей стиль треба застосовувати до всіх тегів div в коді документа. Синтаксис CSS дозволяє об 'єднати всі чотири рядки в один:div { margin: 10px 15px 40px 70рх;} Значення відступів завжди слід вказувати в такому порядку: спочатку - зверху, потім - праворуч, знизу і ліворуч. Якщо відступи однакові з усіх боків, достатньо вказати значення один раз:div { margin: 70рх;} Крім того, ви можете вказати плаваючий вигляд горизонтально (тобто ліворуч і праворуч). Це дуже корисно, коли потрібно встановити блок вказаної ширини точно по центру вікна браузера. Браузер сам автоматично визначає яким повинен бути порожній з обох сторін, якщо написати таку CSS-інструкцію:div { margin: 0 auto;}
3. Використовуйте властивість padding, щоб встановити внутрішні відступи, тобто відстань від меж елемента до будь-яких розташованих всередину нього елементів, включаючи текст. Синтаксис написання у цієї властивості точно такий же, як і у властивості margin:div { padding-top: 10px; padding-right: 15px; padding-bottom: 40px; padding-left: 70px;} Іліdiv {padding: 10px 15px 40px 70px;}
4. Використовуйте властивість text-indent, щоб встановити додатковий відступ для першого рядка кожного абзацу тексту. Наприклад:div { text-indent: 80px;}
5. Використовуйте атрибути hspace та vspace HTML-теґу img, щоб вказати, відповідно, горизонтальний та вертикальний вигляд від зображення до зовнішніх елементів. Наприклад, так:<img src="/"pic.gif"" hspace=""10"" vspace=""15"" />
6. Використовуйте атрибут cellpadding теґу table, якщо ви бажаєте встановити відхід від меж комірок у таблиці до їхнього вмісту. А атрибут cellspacing визначає погляд між комірками таблиці. Наприклад:<table cellpadding=""10"" cellspacing=""15""> <tr><td>1</td><td>2</td></tr></table>