Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Стилове Float и Margin

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за `float` и `margin`

Свойството float позволява на елемент (например изображение) да „отплува“ вляво или вдясно, а останалото съдържание да го обтича. Това е класически начин да поставим текст до снимка. Свойството margin контролира външното отстояние на елементите и ни помага да създадем „въздух“ между тях. Най-важното: използвайте float за подреждане, а margin – за разстояние.

Стъпка по стъпка: текст до изображение

Премахнете излишните <br> тагове, които изместват съдържанието.
Добавете на изображението стил float: left;, за да застане вляво.
Уверете се, че има достатъчно текст, за да се види как той обтича снимката.
Добавете margin: 20px; на изображението, за да има разстояние от всички страни.
Променете margin-а само отдясно – margin-right: 20px;, за да отделите текста от снимката.
Добавете margin-top: 20px; на заглавие или име, за да създадете отстояние само отгоре.

Използвани CSS свойства

float – подрежда елемента вляво (left) или вдясно (right), като текстът го обтича.
margin – задава външно отстояние от всички страни.
margin-top – отстояние само отгоре.
margin-right – отстояние само отдясно.
margin-left – отстояние само отляво.

Експериментирайте с различни стойности, за да видите как се променя подредбата и разстоянията в страницата.