Для того что бы сделать отступы на странице можно применить стилевые параметры margin и padding.
Margin определяет отступ от границы текущего элемента до внутренней границы его родительского элемента. Родительский элемент это элемент внутри которого находится текущий элемент.
Например
1 <div> 2 <div> 3 <div></div> </div> 4 <div></div> </div>
Для 2-го дива родительским будет 1-й див. Для 3-го дива родительский - 2-й. Для 4-го дива родительский 1-й див
Отступы можно указывать в пикселях, процентах или других допустимых в css единицах. margin допускает до 4-х аргументов

• 1 агрумент - задает отступ для всех сторон элемента
• 2 аргумента - первый аргумент задает отступ сверху и снизу, а второй - слева и справа
• 3 аргумента - первый задает отступ от верхнего края, второй слева и справа, а трети от нижнего края
• 4 аргумента - задают отступы от верхнего, правого, нижнего и левого края

возможны варианты:

• margin-top - отступ сверху
• margin-bottom - отступ снизу
• margin-left - отступ слева
• margin-right - щтступ справа

Вариант без отсутпа:
<div style="border: solid 1px; width: 200px; height: 200px;"> <div style="border: solid 1px; width: 100px; height: 100px;">Текст</div> </div>
Делает отступы
<div style="border: solid 1px; width: 200px; height: 200px;"> <div style="border: solid 1px; width: 100px; height: 100px; margin: 20px;">Текст</div> </div>
Для того что бы таблица или див разместить посредине родительского элемента добавьте стиль margin-left: auto; margin-right: auto; тогда в любом браузере будет выводится по центру.
<div style="border: solid 1px; width: 200px; height: 200px; text-align: center;"> <div style="border: solid 1px; width: 100px; height: 100px; margin-top: 20px; margin-left: auto; margin-right: auto;">Текст</div> </div>

Все вышесказанное относиться и к padding - который задает отступ от края элемента до воображаемого прямоугольника, ограничивающего его содержание.
Делает отступы
<div style="border: solid 1px; width: 100px; padding: 10px;">Текст</div>
<p style="border: solid 1px; width: 100px; padding: 10px;">Текст</p>

Текст

Что бы сделать отступ от рисунка до текста, обтекающего его, добавте к коду рисунка 2 параметра vspace="10" - отступ по вертикале, и hspace ="10" - отступ по горизонтале. 10 - это значение отступа в пикселях.

<img src="//img1.liveinternet.ru/images/attach/c/0//45/993/45993147_111.gif" width="100" height="100" alt=" (100x100, 28Kb)" aling="left" hspace="10" vspace="10" />

Например. Нужно текст поместить в рамку. Если мы не делаем отступов то результат будет такой

<div style="background: url('//img1.liveinternet.ru/images/attach/c/0//46/1/46001042_Pic3.jpg'); width: 378px; height: 459px; border: solid 1px #ffffff;"> Текст </div>
Текст будет выведен в верхнем левом углу. Для того что бы это исправить заключим текст в див и для этого дива укажим отступы.
<div style="background: url('//img1.liveinternet.ru/images/attach/c/0//46/1/46001042_Pic3.jpg'); width: 378px; height: 459px; border: solid 1px #ffffff;"> <div style="margin-top: 80px; margin-left: 80px; width: 220px; height: 300px; border: solid 1px #0000f0;"> Текст </div> </div>
Все красиво, но текст вплотную прилегяет к рамке дива. Что бы этого не было нужен padding
<div style="background: url('//img1.liveinternet.ru/images/attach/c/0//46/1/46001042_Pic3.jpg'); width: 378px; height: 459px; border: solid 1px #ffffff;"> <div style="margin-top: 80px; margin-left: 80px; width: 220px; height: 300px; border: solid 1px #0000f0; padding: 10px;"> Текст </div> </div>
Пример использования padding
<span style="background-color: #89abcd;">Текст</span>
Текст Текст выглядит не совсеми красиво.
Добавим padding
<span style="background-color: #89abcd; padding: 2px 10px 2px 10px;">Текст</span>

Текст

По моим наблюдениям отступ сверху не работает в дневнике если нет border. Добавляйте в стили border: solid 1px #ffffff; Цвет рамки нужно подобрать под цвет общего фона, что бы рамки не было видно