Защо margin от 20 px при картинката и при текста бива изобразен различно?
Защо след като слагаме еднакъв margin 20px на картинката и на текста, то те не се показват изравнени в контейнера на браузъра, а текстът се намира малко по-нагоре от картинката?
Моля приложете кода, който сте написали, за да мога да ви дам по-конкретен отговор.
Здравей, Боби. Аз имах предвид самия видео урок.
По принцип и картинките и текстовете са inline елементи и съответно са в един общ ред, като височината на реда се установява от по-големия елемент (в повечето случаи това е картинката). Когато сложим margin-top: 20px и на двата елемента, картинката отмества реда с 20px надолу. Добавянето на такъв маргин на текста не прави нищо, т.к. самият текст е много по-надолу и е подравнен по долния край на картинката (в този ред) и margin-ът не успява да повлияе, защото не може да достигне горният край на картинката, за да може да премести целият ред с 20px надолу. Това са особености на бокс модела. Дано съм успял да отговоря, т.к. не знам за коя част на урока питаш и какви стилове има приложени в този момент.
Виктория има предвид, че бяха добавени 20 рх само на текста, а картинката също слезе още 20 рх надолу без да й са добавени още рх. Би трябвало само текста да слезе надолу щом само на него му се добавят рх, а не и картинката.
Много наблюдателни сте! По описания в урока начин не може да се извърши вертикално подравняване на двата елемента, защото браузърът трябва да знае кой елемент е родител и кой - дете, за да подравни по първия втория. Това става с няколко други свойства на атрибута стил, които вероятно ще се изучават нататък в курса.
Два принт-скрийна за онагледяване на решението: https://prnt.sc/1xn340e https://prnt.sc/1xn3dyi
Вашият отговор
