Крок 1. Почнемо з того, що у нас є зображення і параграф тексту.
Припустимо ми хочемо домогтися того, щоб наше зображення знаходилося справа, а текст обтікав його. Ми також хочемо додати до нашого зображення відступи з лівого краю і знизу, щоб текст не прилипав до картинки. І нарешті, ми хочемо створити рамку навколо зображення.
Отже, ось вихідна позиція:
Крок 2 - застосовуємо властивість float: right до нашого зображення.
Щоб примусово змусити зображення перейти до правого краю ми застосовуємо до нього клас .floatright. в який прописуємо правило float: right.
Що з цього вийшло, дивіться на прикладі нижче:
Крок 3 - додаємо відступи
Відступи потрібні для того, щоб відсунути текст від зображення з лівого і нижнього боків.
Ми будемо використовувати короткий варіант запису правила, яке регулює відступи: "margin: 0 0 10px 10px;". Пам'ятайте, що при такому записі, значення застосовуються в такому порядку - верх, право, низ, ліво.
На даний момент у нас така ситуація:
Крок 4 - Додаємо рамку
Щоб додати рамку до зображення, ми використовуємо правило: "border: 1px solid # 666;" .
Крок 5 - Додаємо внутрішні відступи
Якщо Ви хочете, щоб рамка прилягала до картинки нещільно, то Ви можете використовувати внутрішні відступи, додавши правило: padding: 2px;
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!