Стилове Float и Margin

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

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

 

Посоки на margin 

Cutup #2 Margin - Nana Jeon

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

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

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

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

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

    <

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

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

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

    инж. Златко Петров:

    Защото там си го написал. :)

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

    Румен Гоцев

    Графичен дизайнер
    index

    Rumen Gotsev:

    /home/bounty1212/PicturesScreenshot from 2019-03-25 15-13-37.png

    Rumen Gotsev:

    Screenshot from 2019-03-25 15-13-37.png

    Rumen Gotsev:

    https://prikachi.com/images.php?images/248/9531248A.png

  • Защо margin от 20 px при картинката и при текста бива изобразен различно?

    Viktoriya:

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

    Борис Митев:

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

    Viktoriya:

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

    Борис Митев:

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

    Боян Бонев:

    Виктория има предвид, че бяха добавени 20 рх само на текста, а картинката също слезе още 20 рх надолу без да й са добавени още рх. Би трябвало само текста да слезе надолу щом само на него му се добавят рх, а не и картинката.

    Stamen:

    Много наблюдателни сте! По описания в урока начин не може да се извърши вертикално подравняване на двата елемента, защото браузърът трябва да знае кой елемент е родител и кой - дете, за да подравни по първия втория. Това става с няколко други свойства на атрибута стил, които вероятно ще се изучават нататък в курса.

    Stamen:

    Два принт-скрийна за онагледяване на решението: https://prnt.sc/1xn340e https://prnt.sc/1xn3dyi