Hôm nay Webb hướng dẫn cho các bạn hiểu được 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ì tính hợp lý và đẹp hơn trong website đó là Padding và Margin.
Box Model
Trước tiên bạn hãy nhìn vào hình ảnh ở dưới để hiểu rõ hơn về Padding và Margin trong Box Model:
Xem thêm: Box Model là gì?
Chú thích:
Padding (Khoảng lề bên trong):
Paddinglà khoảng cách giữa nội dung của phần tử và viền của nó.- Nó ảnh hưởng đến khoảng cách giữa nội dung và viền của phần tử.
- Bạn có thể đặt giá trị cho
paddingbằng pixel (px), phần trăm (%) hoặc em. - Ví dụ:
padding: 10px; tạo ra khoảng lề 10 pixel xung quanh nội dung của phần tử.
Margin (Khoảng lề bên ngoài):
Marginlà khoảng cách giữa phần tử và các phần tử khác xung quanh nó.- Nó ảnh hưởng đến khoảng cách giữa các phần tử trong layout.
- Tương tự như
padding, bạn cũng có thể đặt giá trị chomarginbằng pixel, phần trăm hoặc em. - Ví dụ:
margin: 20px; tạo ra khoảng lề 20 pixel giữa phần tử và các phần tử khác.
Padding là gì?
Padding trong CSS là khoảng cách giữa nội dung của một phần tử và viền ranh giới ở xung quanh nó. Chúng ta sẽ có 4 loại khoảng cách nội dung với viên là: bên trái, phải , ở trên và ở phía dưới tương ứng với Padding-left, padding-right, padding-top, padding-bottom.
Cách sử dụng padding trong Css:
p { padding: 2px 2px 2px 2px; }
p { padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px}
Margin là gì?
Margin trong CSS định nghĩa khoảng cách xung quanh các phần tử, bên ngoài các đường viền của chúng. Margin là một phần của box model, với mô hình được sử dụng để thiết kế và bố trí các phân tử HTML Margin cho ta có: bên trái, bên phải, ở trên và ở dưới tương ứng với Margin-left, margin-right, margin-top, margin-bottom.
Cách sử dụng margin trong Css:
p { margin: 2px 2px 2px 2px; }
p { margin-left: 2px; margin-right: 2px; margin-top: 2px; margin-bottom: 2px}
Webb hy vọng qua bài viết này giúp bạn biết cách sử dụng Padding và Marin trong Css.
Đọc thêm các bài viết khác: Tin tức
