[Học CSS] Bài 11: Làm việc với padding trong CSS

Trong bài này chúng ta sẽ tìm hiểu về thuộc tính padding trong CSS, để xem nó được sử dụng như thế nào nhé !

Thuộc tính padding có chức năng gì ?

Như trong bài trước, chúng ta tạo được cái khung viền bao quanh văn bản nhưng mà khoảng cách từ vị trí của viền đến phần nội dung văn bản nó quá ngắn hay nói cách khác là nó sát quá.

Vậy để điều chỉnh khoảng cách giữa nội dung văn bản và đường viền thì chúng ta sẽ sử dụng thuộc tính padding. Các bạn lưu ý là nó sẽ áp dụng chỉ bên trong khung border bao quanh nó thôi nhé.

Hinh dung ve thuoc tinh padding trong CSS

Hiình dung về thuộc tính padding trong CSS

Sử dụng thuộc tính padding trong CSS

Để dụng thuộc tính padding thì chúng ta sử dụng cú pháp như sau:

padding: giá trị;

Giá trị ở đây có thể là px, em, @, … nói chung là các đơn vị kích thước mà chúng ta đã tìm hiểu rồi đó.

Sử dụng lại ví dụ ở bài trước và thêm vào thộc tính padding này, chúng ta sẽ nhận ra sự khác biệt như sau, ở đây mình cho khoảng cách từ viền đến nội dung là 30px :

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            font-size: 40px;
            color: red;
            font-family: Arial;
            font-weight: 800;                         
            }
            p {
            font-size: 16px;
            Border: solid blue 5px ;
            padding: 30px;                                         
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Nếu sử dụng thuộc tính padding thì nó áp dụng đều cho 4 cạnh của border xung quanh nó, nhưng chúng ta cũng có thể tùy chỉnh khoảng cách cho các cạnh khác nhau như sau:

  • padding-top: khoảng cách đến cạnh trên;
  • padding-bottom: khoảng cách đến cạnh dưới;
  • padding-right: khoảng cách đến cạnh phải;
  • padding-left: khoảng cách đến cạnh trái;

Các bạn tham khảo ví dụ sau là sẽ hình dung được.

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            font-size: 40px;
            color: red;
            font-family: Arial;
            font-weight: 800;                         
            }
            p {
            font-size: 16px;
            Border: solid blue 5px ;
            padding-top: 30px;  
            padding-bottom: 160px;
            padding-left: 20px;
            padding-right: 55px
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Còn nếu bạn muốn thêm mỗi cạnh của boder có một thuộc tính khác nhau, khoảng cách khác nhau thì làm tương tự ví dụ này:

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            font-size: 40px;
            color: red;
            font-family: Arial;
            font-weight: 800;                         
            }
            p {
            font-size: 16px;
            Border-top: solid black 5px ; 
            padding-top: 30px;  
            Border-bottom: solid red 5px ;
            padding-bottom: 160px;
            Border-left: solid green 5px ;
            padding-left: 20px;
            Border-right: solid blue 5px ;
            padding-right: 55px
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Thì bài này nội dung bao nhiêu đây thôi, cũng khá là đơn giản đúng không nào ? Mình nhắc lại là padding nó được áp dụng cho phần tử nằm bên trong boder thôi nhé, tức là nó định vị vị trí từ mép viền của border trở vào trong thôi.

Bài học trước đó và tiếp theo

1/5 - (1 vote)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+