Trang Chủ   Vn+ TiVi   Fanpage Twitter  Fanpage FaceBook
Loading
                                         

Bản Tin Câu Lạc Bộ Pa Tin Im-Pod                                                                          
Diễn đàn Vn+
Tiêu Điểm

Tình Yêu - Giới Tính

1001 Bí Ẩn

Tổng hợp phần mềm

Ebook

Thủ Thuật IT

Thủ Thuật Blog

Video Clip

Lạ & Fun


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1 Tìm hiểu margin và padding on Sat Oct 01, 2011 9:11 pm

Trunks-Kun


Administrator
Administrator
Để 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.



Bốn giá trị:

Code:
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ị:

Code:
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ị:

Code:
margin: 30px 20px;

Lề trên và dưới: 30px
Lề trái và phải: 20px


Một giá trị:

Code:
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.

Code:
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

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ồ).



Ví dụ:

Code:
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:

Code:
padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;

Xem lý lịch thành viên

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 

Legend :  [ Vn-plus Founder ] [ Administrator ] [ Super Moderator ] [ Moderator ] [ Member ] [ VIP member ] [ banned ]



Free Auto Backlink Exchange ServiceFree Backlink Exchange For SeoVietnam BacklinksTravel BacklinksFree BacklinksText Backlink ExchangesText Back Link ExchangeFlorists LinksOverShopping Link ExchangeFree Automatic LinkWeb Link Exchange - Linkcsere

    Diễn Đàn Vn-Plus.Org | Thống kê | Liên hệ | Báo cáo lạm dụng  | Bạn muốn quảng cáo | Lên Đầu Trang

    Powered by: PHPBB2. Copyright © 2011  Diễn Đàn Mở VN+
    Contact: Vn-plus Founder . Yahoo: Nobita_xuka_ccy. Địa chỉ: Từ Tây - Yên Phú - Yên Mỹ - Hưng Yên
    BQT không chịu trách nhiệm bất cứ nội dung nào của thành viên đăng tải

Liên Kết Vớivn+

Free forum | © PunBB | Free forum support | Report an abuse | Free blog