Код вашей страницы

<html>
<head>
<style type="text/css">
div.kartinka
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div class="kartinka">
<img src="image/logocss.gif" width="95" height="84" /><br />
CSS — это круто!
</div>
<p>
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
Это параграф. Это параграф. Это параграф.
</p>

<p>
В параграф выше мы вставили элемент div шириной 120 пикселей с картинкой внутри.
Элемент div выровнен по правому краю.
К этому элементу добавлены внешние отступы для отделения иллюстрации от текста.
Границы и внутренние отступы позволяют выделить картинку и подпись к ней.
</p>
</body>

</html>

Результат в окне браузера


CSS — это круто!

Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф.

В параграф выше мы вставили элемент div шириной 120 пикселей с картинкой внутри. Элемент div выровнен по правому краю. К этому элементу добавлены внешние отступы для отделения иллюстрации от текста. Границы и внутренние отступы позволяют выделить картинку и подпись к ней.

К примерам CSS >> В раздел CSS >> На главную >>


HTML-верстка: инструменты и приемы профессиональной front-end разработки