Як задати відступ

Як задати відступ

Найчастіше для вказівки розмірів відступів в 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: 70px;

    }

    Тут «div» — це селектор, який вказує, що цей стиль треба застосовувати до всіх тегам div в коді документа.

    Синтаксис CSS дозволяє об’єднати всі чотири рядки в одну:

    div {

     margin: 10px 15px 40px 70px;

    }

    Значення відступів завжди треба вказувати саме в такому порядку: спочатку — зверху, потім — праворуч, знизу і зліва.

    Якщо відступи однакові з усіх боків, то досить вказати значення один раз:

    div {

     margin: 70px;

    }

    Крім того, можна задати плаваючий зовнішній відступ по горизонталі (тобто зліва і справа). Це буває дуже корисно, коли треба встановити блок заданої ширини точно по центру вікна браузера. Браузер сам автоматично визначає яким повинен бути відступ з обох сторін, якщо написати таку 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>