VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Thuộc tính padding trong CSS


List trong CSS
Con trỏ trong CSS

Thuộc tính padding trong CSS cho phép bạn xác định khoảng không gian giữa nội dung hiển thị của một phần tử với đường viền (border) của nó.

Giá trị của thuộc tính padding có thể ở dạng chiều dài (đơn vị px, pt, cm, …) , dạng %, hoặc từ khóa inherit. Nếu giá trị của thuộc tính là inherit, thì phần tử sẽ kế thừa giá trị của thuộc tính padding này từ phần tử cha của nó. Nếu giá trị là dạng %, thì đó là tỉ lệ phần trăm với hộp chứa phần tử này.

Với CSS, bạn không những có thể xác định padding cho toàn bộ phần không gian bao quanh nội dung, mà còn có thể xác định padding cho từng phần không gian này, ví dụ như phần trên, phần dưới, cạnh trái hoặc cạnh phải. Dưới đây là các thuộc tính trong CSS giúp bạn thực hiện việc này:

  • Thuộc tính padding-bottom xác định phần padding bên dưới của một phần tử.

  • Thuộc tính padding-top xác định phần padding bên trên của một phần tử.

  • Thuộc tính padding-left xác định phần padding bên trái của một phần tử.

  • Thuộc tính padding-right xác định phần padding bên phải của một phần tử.

  • Thuộc tính padding giúp bạn xác định toàn bộ các thuộc tính trên, tức là có thể xác định toàn bộ phần không gian padding bao quanh một phần tử.

Tiếp theo chúng ta sẽ tìm hiểu chi tiết cách sử dụng từng thuộc tính và giá trị của nó trong CSS.


Nội dung chính

  • Thuộc tính padding-bottom trong CSS
  • Thuộc tính padding-top trong CSS
  • Thuộc tính padding-left trong CSS
  • Thuộc tính padding-right trong CSS
  • Thuộc tính padding trong CSS

Thuộc tính padding-bottom trong CSS

Để xác định phần padding bên dưới của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-bottom. Thuộc tính này có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Ví dụ sau minh họa cách sử dụng thuộc tính padding-bottom trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <p style="padding-bottom: 15px; border:1px solid black;">
  Ví dụ đoạn văn có Bottom Padding với độ rộng 15 pixel
  </p>
  
  <p style="padding-bottom: 5%; border:1px solid black;">
  Ví dụ đoạn văn có Bottom Padding với độ rộng 5%
  </p>
</body>
   
</html> 

Kết quả:


Thuộc tính padding-top trong CSS

Để xác định phần padding bên trên của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-top. Thuộc tính này có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Ví dụ sau minh họa cách sử dụng thuộc tính padding-top trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <p style="padding-top: 15px; border:1px solid black;">
  Ví dụ đoạn văn có Top Padding với độ rộng 15 pixel
  </p>
  
  <p style="padding-top: 5%; border:1px solid black;">
  Ví dụ đoạn văn có Top Padding với độ rộng 5%
  </p>
</body>
   
</html> 

Kết quả:


Thuộc tính padding-left trong CSS

Để xác định phần padding bên trái của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-left. Thuộc tính này có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Để xác định phần padding bên trái của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-left. Thuộc tính này có thể nhận giá trị dưới dạng chiều dài hoặc dạng %.


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <p style="padding-left: 15px; border:1px solid black;">
  Ví dụ đoạn văn có Left Padding với độ rộng 15 pixel
  </p>
  
  <p style="padding-left: 15%; border:1px solid black;">
  Ví dụ đoạn văn có Left Padding với độ rộng 5%
  </p>
</body>
   
</html>

Kết quả:


Thuộc tính padding-right trong CSS

Để xác định phần padding bên phải của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-right. Thuộc tính này có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Ví dụ sau minh họa cách sử dụng thuộc tính padding-right trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <p style="padding-right: 15px; border:1px solid black;">
  Ví dụ đoạn văn có Right Padding với độ rộng 15 pixel
  </p>
  
  <p style="padding-right: 5%; border:1px solid black;">
  Ví dụ đoạn văn có Right Padding với độ rộng 5%
  </p>
</body>
   
</html> 

Kết quả:


Thuộc tính padding trong CSS

Sử dụng thuộc tính padding giúp bạn viết ít code hơn mà vẫn có thể điều khiển được phần không gian padding xung quanh nội dung hiển thị của một phần tử. Thuộc tính này có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Tùy theo thứ tự các giá trị bạn xác định trong thuộc tính padding mà các thuộc tính trên sẽ nhận giá trị tương ứng như sau:

Nếu thuộc tính padding có 4 giá trị:

padding: 25px 50px 75px 100px;

  • phần padding bên trên là 25px

  • phần padding bên phải là 50px

  • phần padding bên dưới là 75px

  • phần padding bên trái là 100px

Nếu thuộc tính padding có 3 giá trị:

padding: 25px 50px 75px;

  • phần padding bên trên là 25px

  • phần padding bên phải và trái là 50px

  • phần padding bên dưới là 75px

Nếu thuộc tính padding có 2 giá trị:

padding: 25px 50px;

  • phần padding bên trên và dưới là 25px

  • phần padding bên phải và trái là 50px

Nếu thuộc tính padding có 1 giá trị:

padding: 25px;

  • cả 4 phần padding trên, dưới, trái và phải đều có giá trị là 25px

Ví dụ sau minh họa cách sử dụng thuộc tính padding trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>

<body>
  <p style="padding: 15px; border:1px solid black;">
  Cả 4 phần Padding đều có giá trị là 15px 
  </p> 
  
  <p style="padding:10px 2%; border:1px solid black;"> 
  Top và Bottom Padding là 10px, 
  Left và Right Padding bằng 2% tổng độ rộng của trang
  </p> 
  
  <p style="padding: 10px 2% 10px; border:1px solid black;">
  Top Padding là 10px, 
  Left và Right Padding bằng 2% tổng độ rộng của trang, 
  Bottom Padding là 10px
  </p> 
  
  <p style="padding: 10px 2% 10px 10px; border:1px solid black;">
  Top Padding là 10px, 
  Right Padding bằng 2% tổng độ rộng của trang, 
  Bottom Padding và Top Padding là 10px 
  </p>
</body>
   
</html> 

Kết quả:


List trong CSS
Con trỏ trong CSS

Recent Updates

Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSSSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml