Стилове Float и Margin

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео

Тест за преминаване към следващия урок

 
За какво служи float?
За да накараме даден елемент да бъде обиколен от съдърцанието на страницата
За да накараме да се движи даден елемент по страницата
За да накараме съдържанието да се движи върху даден елемент
 
За какво служи margin?
За добавяне на отстояния на даден елемент от съдържанието на страницата
За поставяне на граница, която да не бъде преминавана
За добавяне на допълнителна място в даден елемент

Въпроси и отговори

  • Дарина Иванова:

    В браузъра е зареден файл index.html, който както се вижда от кода съдържа не само картинка, но и заглавия Zlat Popzlatev и т.н. Ако държите да ги няма трябва да изтриете следващите след картинката два реда (започващият с таг

    <

    h1> и следващият започващ със ) или да ги направите коментар.

    Татяна Илиева:

    Атрибутът text-align се изписва с тире. Виждам, че си пропуснал тирето.

  • Грациела Георгиева:
    Здравей,
    1. Проблемът е просто в атрибута width и стойността към него. С width: 200px, зададено към изображението, казваш, че искаш ширината на картинката да е 200px, тоест не по-голяма или по-малка.
    2. Другото, което забелязах, е, че ако в самия линк на изображнието е посочено, то да е с ширина 45, тоесто при желаната от нас ширина, означава, че изображението ще се разтегне и няма да изглежда добре. Затова можеш да замениш в линка width=45 с width=200 (или по-голяма стойност).
    3. Атрибутът text-align се изписва с тире и не е много добра практика да се задава в тага body.
    
  • Защо margin от 20 px при картинката и при текста бива изобразен различно?

    Viktoriya:

    Защо след като слагаме еднакъв margin 20px на картинката и на текста, то те не се показват изравнени в контейнера на браузъра, а текстът се намира малко по-нагоре от картинката?

    Борис Митев:

    Моля приложете кода, който сте написали, за да мога да ви дам по-конкретен отговор.

    Viktoriya:

    Здравей, Боби. Аз имах предвид самия видео урок.

    Борис Митев:

    По принцип и картинките и текстовете са inline елементи и съответно са в един общ ред, като височината на реда се установява от по-големия елемент (в повечето случаи това е картинката). Когато сложим margin-top: 20px и на двата елемента, картинката отмества реда с 20px надолу. Добавянето на такъв маргин на текста не прави нищо, т.к. самият текст е много по-надолу и е подравнен по долния край на картинката (в този ред) и margin-ът не успява да повлияе, защото не може да достигне горният край на картинката, за да може да премести целият ред с 20px надолу. Това са особености на бокс модела. Дано съм успял да отговоря, т.к. не знам за коя част на урока питаш и какви стилове има приложени в този момент.