Đăng bởi Admin | 5/8/13 | 0 nhận xét
MARGIN :
Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang, hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.
Ví dụ:
Để có một blog đẹp chúng ta phải chỉnh sửa mã nguồn cho các thành phần trở nên cân đối và hài hòa. Bài viết này sẽ hướng dẫn các bạn làm quen với margin và padding, canh lề và canh đệm. Những ai đã từng học qua CSS thì không lạ gì với hai tag này.
MARGIN :
Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang, hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.
margin 10px 5px 0 5px;
Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 10px, 5px, 0px, 5px
Ba giá trị:
Ba giá trị:
margin: 30px 20px 70px;
Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 30px, 20px, 70px, 20px
Hai giá trị:
Hai giá trị:
margin: 30px 20px;
Lề trên và dưới: 30px
Lề trái và phải: 20px
Một giá trị:
Lề trái và phải: 20px
Một giá trị:
margin: 100px;
Tất cả các lề đều được canh một khoảng cách 100px
Nếu bạn không nhớ các vị trí này, hãy sử dụng theo cú pháp sau cho từng vị trí một.
Nếu bạn không nhớ các vị trí này, hãy sử dụng theo cú pháp sau cho từng vị trí một.
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
(Các con số ở đây là ví dụ)
PADDING :
Padding dùng để kiểm soát khoảng trống giữa nội dung và đường viền của nó . Trong tiếng Anh, từ này có nghĩa là vật hay sự đệm, lót.
Tương tự như margin, padding cũng có thể có 4 giá trị đi phía sau, tương ứng trên, phải, dưới, trái (như chiều kim đồng hồ).
Padding dùng để kiểm soát khoảng trống giữa nội dung và đường viền của nó . Trong tiếng Anh, từ này có nghĩa là vật hay sự đệm, lót.
Tương tự như margin, padding cũng có thể có 4 giá trị đi phía sau, tương ứng trên, phải, dưới, trái (như chiều kim đồng hồ).
Ví dụ:
padding: 15px 30px 25px 0;
Trên 15px, phải 30px, dưới 25px, trái 0px
Ngoài ra người ta có thể dùng:
Ngoài ra người ta có thể dùng:
padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
(Các con số ở đây là ví dụ)
Bạn đã nắm được chưa, bắt tay vào thay đổi margin và padding đi nào!
Bạn đã nắm được chưa, bắt tay vào thay đổi margin và padding đi nào!
Theo : Namkna
Thu thuat vi tinh
Không có nhận xét nào:
Đăng nhận xét
Cảm ơn bạn đã nhận xét !
Mã hóa Code- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.