- CSS cơ bản
- CSS là gì? Hướng dẫn cách học CSS hiệu quả
- Thẻ DIV trong HTML là gì?
- Tìm hiểu thẻ SPAN trong HTML
- Thuộc tính Float và Clear trong CSS
- Chia cột trong HTML và CSS
- Thiết kế website bằng HTML và CSS đơn giản
- Thuộc tính Display trong CSS [inline block]
- CSS nâng cao
- Thuộc tính Display Flex trong Css
- CSS Grid Layout và cách sử dụng
- @keyframes trong CSS3
- Hiệu ứng Animation trong CSS3
- Thuộc tính Transform trong Css3
- Sử dụng @Media trong CSS để tạo Responsive
- Hướng dẫn sử dụng Before và After trong CSS
- Hiệu ứng Animation trong CSS3
- Home
- Web Development
- HTML & CSS
- Thuộc tính Margin và Padding trong CSS
Thuộc tính Margin và Padding trong CSS
Khi viết code CSS bạn sẽ gặp phải hai thuộc tính thường dùng nhất đó là thẻ margin và padding. Đối với người mới học thường hay sử dụng nhầm lẫn giữa chúng. Vậy làm sao để phân biệt và khi nào nên dùng margin, khi nào nên dùng padding CSS?
Mục Lục
- Margin trong CSS là gì?
- Padding trong CSS là gì?
- Vậy khi nào thì dùng margin và padding?
Margin trong CSS là gì?
Thẻ Margin là thuộc tính canh lề giữa 2 phần tử HTML. Nó sẽ tạo ra khoảng cách với các phần tử xung quanh [top, right, bottom và left].
Mình ví dụ:
Khi chạy đoạn code dưới:
* { margin: 0; padding: 0; } .box1 { height: 200px; width: 200px; border: 1px solid red; display: inline-block; margin-right: 10px; } .box2 { height: 200px; width: 200px; border: 1px solid green; display: inline-block; }Sẽ cho kết quả:
Cái khoảng trống giữa phần tử A và B đó chính là thuộc tính Margin.
margin: tạo khoảng cách trên, dưới, phải, trái
margin-top: tạo khoảng cách với phần tử ở trên
margin-bottom: tạo khoảng cách với phần tử ở dưới
margin-left:tạo khoảng cách với phần tử bên trái
margin-right: tạo khoảng cách với phần tử bên phải.
Padding trong CSS là gì?
Padding CSS là thuộc tính tạo khoảng trống giữa phần tử cha và phần tử con.
Bạn thử chạy đoạn code này:
* { margin: 0; padding: 0; } .box1 { height: 200px; width: 200px; border: 1px solid red; }Và kết quả khi chưa thêm padding vào:
Bây giờ bạn thêm đoạn mã padding: 10px vào CSS xem có gì khác biệt không nhé!
.box1 { height: 200px; width: 200px; border: 1px solid red; padding: 10px; }Bạn có thấy dòng chữ và đường viền có một khoảng trống cách ra phải không nào, đó chính là padding đấy!
Vậy khi nào thì dùng margin và padding?
Như đã nêu trong khái niệm thì margin chính là khoảng cách giữa các phần tử.
Ví dụ bạn muốn phần header và content cách nhau 10px thì lúc này sẽ dùng đến margin.
Còn với padding bạn sẽ dùng khi muốn tạo khoảng cách giữa phần tử cha và phần tử con.
Ví dụ:
Đoạn văn
Thì lúc này bạn sẽ hiểu là
Đoạn văn
Hi vọng với bài viết này bạn đã biết margin và padding trong CSS là gì rồi phải không nào.
Ngoài ra cũng đừng bỏ lỡ các bài viết khác về HTML và CSS tại://quachquynh.com/html-css/
Cùng chủ đề
- Cách tạo menu dọc đa cấp bằng CSS
- 8 Cách viết CSS chuẩn, dễ đọc và tối ưu
- Hiệu ứng rê chuột trong CSS
- First-child, last-child, nth-child trong CSS
- Thuộc tính Display Flex trong Css
- Hiệu ứng Animation trong CSS3
- Hiệu ứng Hover ảnh CSS3
- Thuộc tính z-index trong CSS
- Thuộc tính Line-height trong CSS
- Thuộc tính Text-Transform trong CSS
- Học CSS
- HTML & CSS
Tags: Học CSS
Bình luận! Hủy
Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *
Bình luận
Tên *
Email *
Trang web
Δ
Đọc thêm
Căn giữa trong CSS [Center Div]
Làm thế nào để căn giữa[center] một phần tử HTML hoặc hình ảnh trong CSS? Khi bạn thiết kế website các phần tử mặc định đều nằm sang bên trái. Nhưng nếu bạn biết một
HTML5 là gì? Tại sao nên sử dụng HTML5 thay HTML?
Công nghệ thông tin đang có những bước tiến mạnh mẽ. Trong đó thiết kế website cũng không ngoại lệ. Nhìn vào ngôn ngữ HTML bạn sẽ thấy được sự phát triển như thế nào.
Viết chữ đè lên ảnh trong HTML
Viết chữ lên hình ảnh trong HTML giúp bạn trang trí website đẹp hơn. Để làm được điều này bạn hãy tham khảo bài viết chèn text lên ảnh với các bước hướng dẫn dễ
Hướng dẫn sử dụng Before và After trong CSS
Before After là một trong những mã CSS dùng để trang trí website mình thường hay sử dụng. Và đây cũng là Pesudo Element thông dụng được dùng để thiết kế Frontend. Bạn đã thực
Thiết kế website bằng HTML và CSS đơn giản
Chào mọi người! Còn nhớ cách đây vài năm khi mình mới làm quen với lập trình web ngày nào cũng tập tành mong muốn một ngày nào đó có thể thiết kế website bằng
Thuộc tính box-sizing trong CSS
Một thuộc tính có lẽ ít được mọi người quan tâm trong CSS đó là Box-sizing. Trước đây khi tìm hiểu về CSS thì nó không được chú ý lắm. Nhưng mãi về sau khi