Свойствата margin и padding
.jpg)
неделя
Здравейте, приятели. Много често начинаещите блогъри, създавайки своя публикация, се чудят как да разположат елементите в страницата по отношение на единия или другия ѝ край. Днес ще ви припомня някои известни значения, като ги подкрепя с примери. За да е по-ясно.
Ще ви припомня значенията на свойствата margin и padding, които отговарят за разположението на един елемент в страницата на блога по отношение на единия или другия ѝ край. Те са много сходни, но работят по различни начини.
Като пример, за да е разбираемо, ще създам блок с две различни цветови граници, зелена и жълта, но няма да му задам свойството margin.
Ето така ще изглежда моят новосъздаден блок, границите му ще са долепени една до друга.
А сега ще добавя свойството margin: 50 px;
Кодът му и ще изглежда така:
А новосъздаденият ми блок ще има следния вид:
Както се вижда, свойството margin може да бъде зададено за всяка страна, като значенията се посочат така:
Ако посочите само една стойност, тя ще се приложи за всички страни. Можете да зададете абсолютно различни стойности за всяка страна.
Първите 15 px се отнасят за отстъпа от горе, второто значение 5 px се отнасят за отстъпа от дясно, следващите 15 px определят отстъпа от долу и последното значение е за отстъпа от ляво. Правилото е да се започне от горе и да се върви по часовниковата стрелка.
Свойството margin може да се използва и за центриране на елементи на страницата, като към него се използва и добавя значението auto. Но тогава задължително се задават размерите на блока, а текстът се подравнява с помощта на taxt-align. Ще дам пример. Същият блок, със същия код, в който се запазват значенията за горния и долния отстъп 15px; а за дясната и лявата страна се задават стойностите margin-left: auto; и margin-right: auto;
Резултатът е:
А сега нека пробваме да добавим в създадения вече блок изображение. Ще добавим адреса на изображението, свойството background и ще зададем отстъпите.
В HTML режим вписваме кода и резултатът е:
Ето така работи свойството margin.
За разлика от margin, свайството padding определя също отстъпите, но вътре в самия елемент и работи по същия принцип. Така, че можете да задавате негови различни стойности за всичките четири страни, но тук auto няма да работи.
Създаваме блок, като задаваме клас tеxt и го оформяме без padding.
Това, което виждаме е следното:
Текстът е долепен до всички страни в блока. Добавяме вътрешни отстъпи към всички страни.
Получаваме:
Какво забелязваме:
➤В кода са зададени стойностите на границите, за да са отделени един от друг блока и елемента в него;
➤Можете да зададете едновременно дебелината, стила и цвета на границата около елемента;
➤Стойностите могат да се задават в произволен ред;
➤Границите могат да бъдат зададени и за всяка страна от блока - border-top, border-bottom, border-left, border-right.
➤Можете да зададете различни стилове за границите;
И се получава това:
Или това, ако го искаме:
В началото на тази публикация си представихме страницата под формата на празен лист. На този лист има блок, който искахме да разположим като картина в рамка по отношение на ръбовете, краищата на този лист. За това използвахме свойството margin. Нашият блок съдържа изображение, което разположихме, като използвахме свойството padding. С помощта на което определихме отстъпите на изображението от страните на блока и оформихме границите.
Надявам се, че ясно и разбираемо ви разказах за свойствата margin и padding. Защото често публикувам кодове и се появяват въпроси за това къде, как и какво да се разположи.
Доскоро и успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Свойството margin
Представете си един обикновен лист хартия, точно както изглежда и страницата в блога, където искате да поставите текст или изображение на строго определена място.Свойството margin определя разстоянието, отстъпа между вашия елемент и ръбовете на страницата.
Като пример, за да е разбираемо, ще създам блок с две различни цветови граници, зелена и жълта, но няма да му задам свойството margin.
<div class="small">
<div style="width: 250px; border: 3px solid green;">
<div style="height: 100px; border: 3px solid yellow;">
</div>
</div>
</div>
<div style="width: 250px; border: 3px solid green;">
<div style="height: 100px; border: 3px solid yellow;">
</div>
</div>
</div>
Ето така ще изглежда моят новосъздаден блок, границите му ще са долепени една до друга.
А сега ще добавя свойството margin: 50 px;
Кодът му и ще изглежда така:
<div class="small">
<div style="width: 250px; border: 3px solid green;">
<div style="height: 100px; border: 3px solid yellow; margin: 50px;">
</div>
</div>
</div>
<div style="width: 250px; border: 3px solid green;">
<div style="height: 100px; border: 3px solid yellow; margin: 50px;">
</div>
</div>
</div>
А новосъздаденият ми блок ще има следния вид:
Както се вижда, свойството margin може да бъде зададено за всяка страна, като значенията се посочат така:
за горе - margin-top;
за дясно - margin-right;
за долу - margin-bottom;
за ляво- margin-left;
Ако посочите само една стойност, тя ще се приложи за всички страни. Можете да зададете абсолютно различни стойности за всяка страна.
Когато използвате свойството margin можете да добавяте стойности за всяка страна в тази последователност: margin:15px 5px 15px 5px;
Първите 15 px се отнасят за отстъпа от горе, второто значение 5 px се отнасят за отстъпа от дясно, следващите 15 px определят отстъпа от долу и последното значение е за отстъпа от ляво. Правилото е да се започне от горе и да се върви по часовниковата стрелка.
Свойството margin може да се използва и за центриране на елементи на страницата, като към него се използва и добавя значението auto. Но тогава задължително се задават размерите на блока, а текстът се подравнява с помощта на taxt-align. Ще дам пример. Същият блок, със същия код, в който се запазват значенията за горния и долния отстъп 15px; а за дясната и лявата страна се задават стойностите margin-left: auto; и margin-right: auto;
<div class="small">
<div style="width: 100%; border: 3px solid green;">
<div style="width: 200px; height: 100px; border: 3px solid yellow; margin: 50px auto;">
</div>
</div>
</div>
<div style="width: 100%; border: 3px solid green;">
<div style="width: 200px; height: 100px; border: 3px solid yellow; margin: 50px auto;">
</div>
</div>
</div>
Резултатът е:
А сега нека пробваме да добавим в създадения вече блок изображение. Ще добавим адреса на изображението, свойството background и ще зададем отстъпите.
<div class="smaill">
<div style="background-color: #2288bb; border: 3px solid green; width: 100%;">
<div style="background-image: url( ); border: 3px solid yellow; height: 100px; margin: 40px ; width: 250px;">
</div>
</div>
</div>
<div style="background-color: #2288bb; border: 3px solid green; width: 100%;">
<div style="background-image: url( ); border: 3px solid yellow; height: 100px; margin: 40px ; width: 250px;">
</div>
</div>
</div>
В HTML режим вписваме кода и резултатът е:
Ето така работи свойството margin.
Свойството padding
За разлика от margin, свайството padding определя също отстъпите, но вътре в самия елемент и работи по същия принцип. Така, че можете да задавате негови различни стойности за всичките четири страни, но тук auto няма да работи.
Създаваме блок, като задаваме клас tеxt и го оформяме без padding.
<div class=" text">
<div style="border: 3px solid red; text-align: justify; width: 400px;">тук е текст или изображение
</div>
</div>
<div style="border: 3px solid red; text-align: justify; width: 400px;">тук е текст или изображение
</div>
</div>
Това, което виждаме е следното:
Поли Генова е българска поп певица, участваща на Евровизия от 2011 и е новият представител на България в конкурса на Евровизия 2016 с песента «Ако любовта е престъпление». Тя е родена и израснала в столицата София. С пеенето момичето започва още от детството си, а на 4 години тя вече има професионален учител. Благодарение на усилията и старанието си на 8 години Поли е част от най-престижната детската вокална група "Бон-Бон". Паралелно с това Поли Генова учи кларинет в музикалното училище "Любомир Пипков".
Текстът е долепен до всички страни в блока. Добавяме вътрешни отстъпи към всички страни.
<div class=" text">
<div style="border: 3px solid red; text-align: justify; padding: 30px;
width: 400px;"> Поли Генова е българска поп певица, участваща на Евровизия от 2011 и е новият представител на България в конкурса на Евровизия 2016 с песента «Ако любовта е престъпление». Тя е родена и израснала в столицата София. С пеенето момичето започва още от детството си, а на 4 години тя вече има професионален учител. Благодарение на усилията и старанието си на 8 години Поли е част от най-престижната детската вокална група "Бон-Бон". Паралелно с това Поли Генова учи кларинет в музикалното училище "Любомир Пипков".
</div>
</div>
<div style="border: 3px solid red; text-align: justify; padding: 30px;
width: 400px;"> Поли Генова е българска поп певица, участваща на Евровизия от 2011 и е новият представител на България в конкурса на Евровизия 2016 с песента «Ако любовта е престъпление». Тя е родена и израснала в столицата София. С пеенето момичето започва още от детството си, а на 4 години тя вече има професионален учител. Благодарение на усилията и старанието си на 8 години Поли е част от най-престижната детската вокална група "Бон-Бон". Паралелно с това Поли Генова учи кларинет в музикалното училище "Любомир Пипков".
</div>
</div>
Получаваме:
Поли Генова е българска поп певица, участваща на Евровизия от 2011 и е представител на България в конкурса на Евровизия 2016 с песента «Ако любовта е престъпление». Тя е родена и израснала в столицата София. С пеенето момичето започва още от детството си, а на 4 години тя вече има професионален учител. Благодарение на усилията и старанието си на 8 години Поли е част от най-престижната детската вокална група "Бон-Бон". Паралелно с това Поли Генова учи кларинет в музикалното училище "Любомир Пипков".
Какво забелязваме:
➤В кода са зададени стойностите на границите, за да са отделени един от друг блока и елемента в него;
➤Можете да зададете едновременно дебелината, стила и цвета на границата около елемента;
➤Стойностите могат да се задават в произволен ред;
➤Границите могат да бъдат зададени и за всяка страна от блока - border-top, border-bottom, border-left, border-right.
➤Можете да зададете различни стилове за границите;
<div class="smaill 1">
<div style="background-color: #BFCFFE; border: 5px solid #00a8e1; width: 100%;">
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVp9FflLPOEKy2V9RvHlUY7PE2TSB5PIiAL9NiyWv7cxTurl16G9Ebgbw6L6hg2dWR9EQAFJYD3k07CkwsYWzYnpHzvkNJFLNbTCDZYvJRAMH2LaJZSsHvtDzHXtxIEfyms3J3Ktp8BA8/h250/Gerber2.jpg); border: double; height: 150px; margin: 30px auto 10px; width: 150px;">
</div>
</div>
</div>
<div style="background-color: #BFCFFE; border: 5px solid #00a8e1; width: 100%;">
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVp9FflLPOEKy2V9RvHlUY7PE2TSB5PIiAL9NiyWv7cxTurl16G9Ebgbw6L6hg2dWR9EQAFJYD3k07CkwsYWzYnpHzvkNJFLNbTCDZYvJRAMH2LaJZSsHvtDzHXtxIEfyms3J3Ktp8BA8/h250/Gerber2.jpg); border: double; height: 150px; margin: 30px auto 10px; width: 150px;">
</div>
</div>
</div>
И се получава това:
Или това, ако го искаме:
В началото на тази публикация си представихме страницата под формата на празен лист. На този лист има блок, който искахме да разположим като картина в рамка по отношение на ръбовете, краищата на този лист. За това използвахме свойството margin. Нашият блок съдържа изображение, което разположихме, като използвахме свойството padding. С помощта на което определихме отстъпите на изображението от страните на блока и оформихме границите.
Надявам се, че ясно и разбираемо ви разказах за свойствата margin и padding. Защото често публикувам кодове и се появяват въпроси за това къде, как и какво да се разположи.
Доскоро и успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
идеята почерпих от shpargalochki.ru