Bạn đang xem : padding có tác dụng gì trong css

CSS

Phần đệm

Padding được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử, bên trong bất kỳ đường viền xác định nào.

Phần tử này có phần đệm là 70px.

Hãy tự mình thử »

CSS Padding

Thuộc tính CSS padding được sử dụng để tạo khoảng trống xung quanh
nội dung của phần tử, bên trong bất kỳ đường viền xác định nào.

Với CSS, bạn có toàn quyền kiểm soát phần đệm. Có tài sản
để đặt phần đệm cho mỗi bên của phần tử (trên cùng, bên phải, dưới cùng và bên trái).

Padding – Các mặt riêng lẻ

CSS có các thuộc tính để chỉ định phần đệm cho mỗi
bên của một phần tử:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Tất cả các thuộc tính đệm có thể có các giá trị sau:

  • chiều dài – chỉ định một khoảng đệm bằng px, pt, cm, v.v.
  • % – chỉ định một khoảng đệm tính bằng% chiều rộng của phần tử chứa
  • inherit – chỉ định rằng phần đệm phải được kế thừa từ phần tử mẹ

Lưu ý: Không cho phép các giá trị âm.

Ví dụ

Đặt các khoảng đệm khác nhau cho tất cả bốn cạnh của & lt; div & gt; phần tử:

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

Hãy tự mình thử »

Padding – Thuộc tính tốc ký

Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính đệm trong
một tài sản.

Thuộc tính padding là thuộc tính viết tắt cho cá nhân sau
thuộc tính đệm:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Đây là cách nó hoạt động:

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

  • đệm: 25px 50px 75px 100px;
    • phần đệm trên cùng là 25px
    • phần đệm bên phải là 50px
    • phần đệm dưới cùng là 75px
    • phần đệm bên trái là 100px

Ví dụ

Sử dụng thuộc tính viết tắt padding với bốn giá trị:

div {
padding: 25px 50px 75px 100px;
}

Hãy tự mình thử »

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

  • padding: 25px 50px 75px;
    • phần đệm trên cùng là 25px
    • phần đệm bên phải và bên trái là 50px
    • phần đệm dưới cùng là 75px
Xem Thêm  trên / dưới / trái / phải | Thủ thuật CSS - css vị trí trên cùng bên trái

Ví dụ

Sử dụng thuộc tính viết tắt padding với ba giá trị:

div {
padding: 25px 50px 75px;
}

Hãy tự mình thử »

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

  • đệm: 25px 50px;
    • đệm trên và dưới là 25px
    • phần đệm bên phải và bên trái là 50px

Ví dụ

Sử dụng thuộc tính viết tắt padding với hai giá trị:

div {
padding: 25px 50px;
}

Hãy tự mình thử »

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

  • padding: 25px;
    • cả bốn padding đều là 25px

Ví dụ

Sử dụng thuộc tính viết tắt padding với một giá trị:

div {
padding: 25px;
}

Hãy tự mình thử »

Phần đệm và chiều rộng phần tử

Thuộc tính CSS width chỉ định chiều rộng của vùng nội dung của phần tử. Các
vùng nội dung là phần bên trong phần đệm, đường viền và lề của một phần tử
( mô hình hộp ).

Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm được thêm vào phần tử đó sẽ
được thêm vào tổng chiều rộng của phần tử. Đây thường là một kết quả không mong muốn.

Ví dụ

Đây, & lt; div & gt; phần tử có chiều rộng là 300px.
Tuy nhiên, chiều rộng thực tế của & lt; div & gt; phần tử sẽ là 350px (300px +
25px đệm bên trái + 25px đệm phải):

div {
width: 300px;
padding: 25px;
}

Hãy tự mình thử »

Để giữ chiều rộng ở mức 300px, bất kể số lượng đệm như thế nào, bạn có thể sử dụng
thuộc tính box-sizing
. Điều này làm cho phần tử duy trì chiều rộng thực của nó; nếu
bạn tăng khoảng đệm, không gian nội dung có sẵn sẽ giảm xuống.

Ví dụ

Sử dụng thuộc tính box-sizing để giữ chiều rộng ở 300px, bất kể
số lượng đệm:

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

Hãy tự mình thử »

Các ví dụ khác

Đặt phần đệm bên trái
Ví dụ này trình bày cách đặt phần đệm bên trái của & lt; p & gt; phần tử.

Xem Thêm  Tạo biểu mẫu đẹp với trình tạo biểu mẫu PHP - cách tạo biểu mẫu bằng php

Đặt đúng phần đệm
Ví dụ này trình bày cách đặt phần đệm phù hợp của & lt; p & gt; phần tử.

Đặt phần đệm trên cùng
Ví dụ này trình bày cách đặt phần đệm trên cùng của & lt; p & gt; phần tử.

Đặt phần đệm dưới cùng
Ví dụ này trình bày cách đặt phần đệm dưới cùng của & lt; p & gt; phần tử.

Tự kiểm tra bằng các bài tập

Bài tập:

Đặt phần đệm trên cùng của & lt; h1 & gt; thành 30 pixel.

& lt; phong cách & gt;
h1 {
  : 30px;
}
& lt; / style & gt;

& lt; body & gt;
  & lt; h1 & gt; Đây là tiêu đề & lt; / h1 & gt;
  & lt; p & gt; Đây là đoạn văn & lt; / p & gt;
  & lt; p & gt; Đây là đoạn văn & lt; / p & gt;
& lt; / body & gt;

Bắt đầu bài tập

Tất cả các thuộc tính CSS Padding

Tài sản
Sự mô tả

đệm
Thuộc tính viết tắt để đặt tất cả các thuộc tính đệm trong một khai báo

padding-bottom
Đặt phần đệm dưới cùng của một phần tử

padding-left
Đặt phần đệm bên trái của một phần tử

padding-right
Đặt phần đệm bên phải của một phần tử

padding-top
Đặt phần đệm trên cùng của một phần tử


Xem thêm những thông tin liên quan đến chủ đề padding làm gì trong css

How CSS Padding and Margin Works

  • Tác giả: Steve Griffith – Prof3ssorSt3v3
  • Ngày đăng: 2018-06-30
  • Đánh giá: 4 ⭐ ( 1703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video covers everything you need to know about how CSS padding and margins work and how they can be written in your CSS stylesheets.

    Code GIST: https://gist.github.com/prof3ssorSt3v3/bb9e527c082d874a94537e702a18419d

Thuộc tính Margin và padding trong CSS

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 8096 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong một trang web đôi lúc chúng ta thấy có những khoảng trống giữa các khối với nhau, nhưng mà họ lại không sử dụng tag ,… Những khoảng trống đó được tạo bằng CSS và cụ thể là sử dụng hai thuộc tính margin và padding.

Phân biệt padding và margin trong CSS

  • Tác giả: thietkewebchuan.com
  • Đánh giá: 4 ⭐ ( 3231 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, mình sẽ hướng dẫn bạn phân biệt padding và margin và trường hợp khi nào thì sử dụng padding và margin

Sử dụng Padding trong CSS

  • Tác giả: levunguyen.com
  • Đánh giá: 5 ⭐ ( 2552 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong lập trình web CSS, bên cạnh thiết lập khoảng cách giữa các phần tử HTML, thì lập trình viên cũng cần thiết lập khoảng cách giữa các nội dung trong một phần tử web. Để thực hiện được, ta sẽ sử dụng thuộc tính padding để canh chỉnh gồm có các giá trị padding bottom canh chỉnh dưới, padding top canh chỉnh trên, padding left canh chỉnh trái và padding right canh chỉnh phải. Bài viết giới thiệu về thuộc tính padding trong lập trình web là gì? Các giá trị có trong thuộc tính này cũng như đi sâu vào hướng dẫn cụ thể cách làm của mỗi giá trị. Đồng thời kèm theo ví dụ minh hoạ cách thao tác cụ thể để bạn dễ dàng nắm bắt và áp dụng vào quá trình làm việc với các dự án lập trình web.

Hướng dẫn và ví dụ CSS Padding

  • Tác giả: openplanning.net
  • Đánh giá: 3 ⭐ ( 8562 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phân Biệt Padding và Margin trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 5975 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khác biệt giữa padding và margin đó là: Padding tạo khoảng đệm từ đường viền vào bên trong nội dung phần tử, Margin tạo khoảng cách từ đường viền ra phía ngoài phần tử.

Padding trong CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 4 ⭐ ( 2033 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học CSS này, bạn sẽ học cách điều chỉnh vùng đệm (padding) của một phần tử bằng CSS.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Python JSON - Cách chuyển đổi một chuỗi thành JSON - văn bản python thành json

By ads_php