Padding trong HTML là gì

Question

Hôm nay Green House xin hướng dẫn các bạn 2 thuộc tính cơ bản trong CSS khi lập trình website, đây là 2 thuộc tính được sử dụng nhiều nhất và phổ biến nhất, vì nó sẽ tăng độ hợp lý, đẹp đẽ trong website, đó chính là Padding và Margin. Vậy Padding là gì? Margin là gì? Cách sử dụng padding và margin trong css là gì?

Nội dung chính Show

Margin là gì?
Đăng nhập
Các thuộc tính margin & padding
Các thuộc tính padding
Các thuộc tính margin
Giá trị auto

Padding và Margin là hai thuộc tính được sử dụng thường xuyên trong code CSS. Tuy nhiên vẫn còn khá nhiều bạn chưa hiểu rõ và còn nhầm lẫn giữa hai thuộc tính này, vì chúng đều được sử dụng để điều chỉnh không gian giữa các phần tử. Tuy nhiên bài viết này mình sẽ đề cập sau hơn về 2 thuộc tính này.

Các bạn hãy xem hình vẽ sau và mình sẽ giải thích ở dưới

Padding và margin trong modal box

Box Model
Padding là gì?
Margin là gì?

Box Model

Trên trang HTML, các phần tử của trang điều được biểu diễn bởi hình hộp chữ nhật. vì thế thuật ngữ box model được dùng để ám chỉ các phần tử của trang. Nhìn trên hình bạn sẽ thấy có 3 box model là 3 hình chữ nhật

Padding hiểu 1 cách đơn giản thì thuộc tính là khoảng trống nằm giữa nội dung và viền. Chúng ta sẽ có 4 khoảng cách giữa nội dung với viền và bên trái, bên phải, phía trên và phía dưới tương ứng là padding-top, padding-left, padding-right và padding-bottom. Chúng ta có thể hiểu đơn giản hơn, là padding chính là khoảng cách giữa thẻ mẹ so với thẻ con.

Cách sử dụng padding trong css:

p { padding: 2px 2px 2px 2px; }

hoặc

p { padding-left: 2px; padding-right: 2px ; padding-top: 2px; padding-bottom: 2px}

Margin là gì?

Margin cũng là khoảng cách, nhưng không phải là khoảng cách giữa thẻ mẹ so với thẻ con, mà là khoảng cách giữa các phần tử con với nhau, và khoảng cách giữa phần tử cùng với viền. Khoảng cách này cũng có 4 thuộc tính là trái phải, trên dưới tương ứng là margin-left, margin-right, margin-top, margin-bottom.

Cách sử dụng margin trong css:

p { margin: 2px 2px 2px 2px; }

hoặc

p { margin-left: 2px; margin-right: 2px ; margin-top: 2px; margin-bottom: 2px}

Hy vọng qua bài viết này, các bạn sẽ hiểu rõ hơn Margin và Padding và cách dùng chúng trong CSS để làm đẹp trang web của các bạn nhé.

Đăng nhập

Các thuộc tính margin & padding là những công cụ mạnh mẽ giúp chúng ta kiểm soát các khoảng trống. Các thuộc tính này thường được sử dụng để thiết lập kích thước và canh chỉnh vị trí các thành phần trong trang web. Hãy cùng thảo luận về chúng.

Các thuộc tính margin & padding

Kiểm soát khoảng trống là một trong những kĩ thuật quan trọng nhất trong hầu hết mọi khía cạnh của cuộc sống.

Trong CSS, việc kiểm soát khoảng trống có thể giúp chúng ta nhanh chóng thiết lập kích thước và canh chỉnh vị trí của các phần tử. Dưới đây là một vài thuộc tính được sử dụng để kiểm soát khoảng trống bên trong và xung quanh các phần tử:

Các thuộc tính padding - kiểm soát khoảng trống bên trong các phần tử.
Các thuộc tính margin - kiểm soát khoảng trống xunh quanh các phần tử.

Các thuộc tính padding

Chúng ta có tất cả 4 thuộc tính padding:

padding-top - khoảng cách giữa cạnh trên của container và nội dung mà nó chứa.
padding-right - khoảng cách giữa cạnh phải của container và nội dung.
padding-bottom - khoảng cách giữa cạnh dưới của container và nội dung.
padding-left - khoảng cách giữa cạnh trái của container và nội dung.

Trong bài viết về các kiểu container, chúng ta đã tạo ra một vài liên kết có phong cách hiển thị trông giống như các nút nhấn bằng cách sử dụng các thuộc tính width và height. Việc sử dụng các thuộc tính width và height để thiết lập kích thước của các nút nhấn có một vài điểm bất cập. Đó là chúng ta sẽ cần phải chỉnh sửa code CSS để đáp ứng với nội dung chữ cụ thể bên trong nút nhấn.

Các thuộc tính padding có thể giúp chúng ta đơn giản hóa cả 2 tác vụ thiết lập kích thước cho các nút nhấn và canh giữa nội dung chữ.

.btn {
   display: inline-block;

   padding-top: 15px;
   padding-right: 36px;
   padding-bottom: 15px;
   padding-left: 36px;

   font-size: 18px;
   text-decoration: none;
}

.btn-primary {
   color: White;
   background-color: RoyalBlue;
}

.btn-success {
   color: White;
   background-color: LimeGreen;
}

.btn-warning {
   color: White;
   background-color: Orange;
}

doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Spacetitle>
      <link rel="stylesheet" href="space.css">
   head>
   <body>
      <a class="btn btn-primary" href="#">Registera>
      <a class="btn btn-success" href="#">Add To Carta>
      <a class="btn btn-warning" href="#">More Infoa>
   body>
html>

Xem kết quả hiển thị

Các thuộc tính padding cũng có một dạng viết thu gọn có thể giúp chúng ta chỉ định cả 4 giá trị trong 1 dòng code. 4 giá trị sẽ được đặt theo thứ tự thuận theo chiều kim đồng hồ - top, right, bottom, left.

padding: 15px 36px 15px 36px;

Nếu như chỉ có 3 giá trị được liệt kê trong dạng viết ngắn, giá trị đầu tiên sẽ là top, giá trị thứ 2 là right/left, và giá trị cuối cùng là bottom.

padding: 15px 36px 15px;

Chúng ta cũng có thể sử dụng dạng viết ngắn chỉ với 2 giá trị. Khi đó thì giá trị đầu tiên sẽ là top/bottom và giá trị thứ 2 sẽ là right/left.

padding: 15px 36px;

Trong trường hợp chỉ có 1 giá trị duy nhất được liệt kê, nó sẽ được áp dụng cho cả 2 hướng padding.

padding: 15px;

Các thuộc tính margin

Các thuộc tính padding giúp chúng ta kiểm soát khoảng trống bên trong các container, do đó nên chúng thường được sử dụng để thiết lập kích thước của các phần tử và canh chỉnh vị trí của các nội dung bên trong.

Ở mặt khác, các thuộc tính margin lại giúp chúng ta kiểm soát khoảng trống ở phía bên ngoài và xung quanh các phần tử. Do đó nên chúng thường được sử dụng để canh chỉnh vị trí của các container:

margin-top - khoảng cách tối thiểu từ cạnh trên của 1 container tới 1 phần tử khác; hoặc cạnh trên của container bên ngoài nó.
margin-right - khoảng cách tối thiểu từ cạnh phải của 1 container tới 1 phần tử khác; hoặc cạnh phải của container bên ngoài nó.
margin-bottom - khoảng cách tối thiểu từ cạnh dưới của 1 container tới 1 phần tử khác; hoặc cạnh dưới của container bên ngoài nó.
margin-left - khoảng cách tối thiểu từ cạnh trái của 1 container tới 1 phần tử khác; hoặc cạnh trái của container bên ngoài nó.

Các thuộc tính margin cũng có thể được viết ở dạng thu gọn giống như các thuộc tính padding. Hãy cùng viết một đoạn code CSS để xem các thuộc tính margin hoạt động như thế nào. Chúng ta sẽ tận dụng ví dụ đã có trước đó. Lần này, chúng ta sẽ tạo ra một vài khoảng trống xung quanh các nút nhấn.

.btn {
   display: inline-block;
   padding: 15px 36px;

   /* thêm khoảng trống vào bên trái
     * và bên phải các nút nhấn
     */
   margin-right: 18px;
   margin-left: 18px;

   font-size: 18px;
   text-decoration: none;
}

.btn-primary {
   color: White;
   background-color: RoyalBlue;
}

.btn-success {
   color: White;
   background-color: LimeGreen;
}

.btn-warning {
   color: White;
   background-color: Gold;
}

Giá trị auto

Chúng ta lại được gặp lại auto ở đây. Giá trị này thường được sử dụng với margin để nhanh chóng thiết lập vị trí cho các phần tử. Ví dụ dưới đây sẽ minh họa cách canh giữa vị trí cho một phần tử hoặc canh sát lề phải.

doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Automa-g-ictitle>
      <link rel="stylesheet" href="auto.css">
   head>
   <body>
      <div class="container">
         <div class="square center">div>
      div>

      <div class="container">
         <div class="square right">div>
      div>
   body>
html>

.container {
   padding: 30px 15px;
}

.square {
   width: 90px;
   height: 90px;

   background-color: Crimson
}

/* margin ft. auto :D */

.square.center {
   /* di chuyển khối vuông vào giữa (theo phương ngang) */
   margin-left: auto;
   margin-right: auto;
}

.square.right {
   /* di chuyển khối vuông sang bên phải */
   margin-left: auto;
}

Xem kết quả hiển thị

Đối với hình vuông đầu tiên, mục đích của chúng ta là canh giữa theo phương ngang bằng cách tạo ra khoảng trống ở cả 2 phía bên trái và bên phải. Tuy nhiên, mình nghĩ tác vụ thực hiện tính toán kích thước của khoảng trống được ủy thác lại cho trình duyệt web sẽ tốt hơn. Do đó mình thử sử dụng giá trị auto và thấy nó hoạt động rất hoàn hảo.

Đối với hình vuông thứ hai thì mình muốn canh vị trí về phía bên phải của container cha bao quanh bên ngoài. Do đó mình chỉ thêm khoảng trống vào phía bên trái của hình vuông với kích thước auto.

Điểm tuyệt vời nhất của phương thức canh chỉnh vị trí này đó là trình duyệt web sẽ luôn theo dõi và áp dụng những điều chỉnh phù hợp ở mọi thời điểm khi người dùng đang sử dụng trang web. Nếu như bạn thử thu hẹp lại cửa sổ trình duyệt web thì bạn sẽ thấy nội dung trong trang web cũng sẽ được điều chỉnh tự động để đáp ứng với kích thước hiển thị mới. Hình vuông đầu tiên sẽ luôn luôn được hiển thị ở chính giữa và hình vuông thứ hai sẽ luôn hiển thị ở phía bên phải.

Trong bài tiếp theo, chúng ta sẽ gặp gỡ cú pháp truy vấn thiết bị trong CSS. Cú pháp này cho phép chúng ta viết code CSS hướng đến từng khoảng kích thước hiển thị. Sau đó, chúng ta sẽ cùng xây dựng một thanh điều hướng sử dụng thiết kế đáp ứng và có thể đóng/mở trên các thiết bị di động.

[CSS] Bài 13 - Cú Pháp Truy Vấn Thiết Bị

Hỏi Đáp Là gì Margin trong html Padding trong html Padding la gì Margin trong CSS

Padding trong HTML là gì

Box Model

Margin là gì?

Đăng nhập

Các thuộc tính margin & padding

Các thuộc tính padding

Các thuộc tính margin

Giá trị auto

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội