CSS სახელმძღვანელო

CSS - დამწყებებისთვის

CSS - მიმოხილვა CSS - სინტაქსი CSS - სელექტორები CSS - შემოტანა CSS - ტექსტური თვისებები CSS - კომენტარი CSS - ფონები CSS - საზღვრები CSS - სიმაღლე და სიგანე CSS - ფონტის შემოტანა CSS - შიდა დაშორება (PADDING) CSS - გარე დაშორება (MARGIN) CSS - სიები CSS - ბმულები CSS - DISPLAY CSS - პოზიციები CSS - Z-INDEX CSS - OVERFLOW CSS - Opacity CSS - ერთეულები CSS - !important

CSS - სელექტორები

CSS - კომბინატორები CSS - ფსევდო კლასები CSS - ფსევდო ელემენტები CSS - ატრიბუტი სელექტორი

CSS - FLEXBOX

FLEXBOX - მიმოხილვა FLEXBOX - კონტეინერი FLEXBOX - ელემენტები

CSS - Responsive

Responsive - მიმოხილვა Responsive - პრინციპები @media - ქუერები

CSS - საშუალო დონე

CSS - ფილტრები CSS - object-fit CSS - გრადაციები CSS - ფონის თვისებები CSS - შუქჩრდილები CSS - 2D/3D ტრანსფორმაციები CSS - გადასვლები CSS - კურსორის თვისებები CSS - ანიმაციები

CSS - კომპონენტები

CSS - სანავიგაციო მენიუ (NAVBAR) CSS - ფორმა CSS - ღილაკები CSS - ბარათი (card) CSS - CHECKBOX & RADIO

CSS   padding  თვისება განსაზღვრავს ელემენტის საზღვრებში  შიდა დაშორებებს

 

როგორ გამოვიყენოთ padding თვისება ?


მაგალითი:

.container{
padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
padding-left: 80px;
}


padding -  თვისების გამოყენება შეგიძლიათ ელემენტის ოთხივე მხარეს

მაგალითად:


  • padding-top - დაშორება ზედა მხარეს
  • padding-right - დაშორება მარჯვენა მხარეს
  • padding-bottom - დაშორება ქვედა მხარეს
  • padding-left - დაშორება მარცხენა მხარეს



padding თვისების მნიშნელობები შეიძლება იყოს (px,cm,%)


ასევე შესაძლებელია შემოკლებული ვერსიის გამოყენება

.container{
    padding: 50px 30px 50px 80px;
  }


padding_ს  მნიშვნელობები  გადაეცემა საათის ისრის მოძრაობის პრინციპით, 50px = top, 30px = right , 50px = bottom, 80px = left



.container{
    padding: 50px 30px;
  }


  50px = (top, bottom), 30px = (right, left)



.container{
    padding: 50px ;
  }


 50px = (top, bottom, right, left)


padding გამოყენების დროს გასათვალისწინებელია ფაქტი რომ padding ზომა ემატება ელემენტის ზომას მაგალითად:

.container{
            padding: 50px;
            width: 400px;
}

.container ელემენტის ზომა ჯამში იქნება 450px


რათქმაუნდა  ზედმეტი კალკუკაციები არაფერში არ გვჭირდება, მსგავსი პრობლემა რომ თავიდან ავიცილოთ ელემენტზე ვიყენებთ თვისებას box-sizing მის მნიშვნელობად კი border-box , აღნიშნული თვისება ელემენტს აფიქსირებს საზღვრებში

მაგალითი:

.container{
padding: 50px;
  width: 400px;
  box-sizing: border-box;

  }  


აღნიშნულ  მაგალითში ელემენტის ზომა დარჩება  400px


რეკომენდირებულია რომ თვისება  box-sizing: border-box; გვქონდეს ყველა ელემენტზე გაწერილი , ამისათვის ვიყენებთ
* სელექტორს
მაგალითი:
  *{
    box-sizing: border-box;
  }