Thứ Bảy, 25 tháng 10, 2014
Số lượt xem bài này:
Sử dụng chuẩn Padding và Margin
Trong thiết kế Web nói chung và chèn hình ảnh..trong từng bài viết nói riêng ta thường sử dụng Padding và Margin. Trong thiết kế Web thì Padding và Margin được dùng cho tổng thể để định nghĩa các thành phần trong Web cần căn lề, sắp xếp các thành phần của nó để khi thực hiện các bài viết, bạn không cần căn lề cho từng bài viết riêng lẻ nữa và để trang web nhìn bắt mắt. Tuy vậy trong nhừng trường hợp cụ thể trong bài viết như đưa dòng chú thích cho ảnh vào giữa ảnh ta phải nhờ đến Padding và Margin. Điều này tôi đã đề cập đến ở bài trước
Về Padding và Margin hầu hết những người mới sử dụng css sử dụng padding và margin rất lung tung. Thực tế cho thấy việc sử dụng thuộc tính height để tạo padding hoặc margin cũng dẫn đến lỗi và không nhất quán. Khi bạn hiểu được padding và margin thì rất tốt trong việc xây dựng nền tảng trong thiết kế web với CSS
Vậy Padding và Margin là gì?
Margin được dùng để kiểm soát các khoảng trống giữa các thành phần trong trang web, chúng ta còn gọi chúng là lề. Theo đó chúng ta có các loại lề: lề trái, lề phải, lề trên, lề dưới.
Padding là khoảng cách phía trong của một thành phần với nội dung, thành phần nó bao quanh, và margin là khoảng cách phía ngoài của một thành phần với các đối tượng khác hoặc thành phần bao quanh nó.
Tương tự như Margin đã nói ở trên, Padding cũng giúp xác định khoảng cách. Nhưng nó dùng xác định khoảng cách từ đường viền của phần tử đến nội dung chứa trong nó. Hình sau sẽ mô tả rõ hơn về tác dụng của Padding:
Ngoài ra , thuộc tính margin còn cho phép bạn định khoảng cách lề một cách tự động:
Sự khác nhau sẽ nhận thấy rõ ràng nhất khi bạn đặt một cái nền (background) và các khung viền (border) vào thành phần đó. Không giống như padding, margin không bao gồm background và border, tức là margin nằm phía ngoài của border đồng thời không hiển thị nền.
Các thông số của Padding và Margin được xếp thứ tự như sau: TRÊN-PHẢI-DƯỚI-TRÁI (TOP-RIGHT-BOTTOM-LEFT)
Cách viết Padding và Margin
Ví dụ
Ví dụ
- Nếu chỉ viết: margin:1px; - có nghĩa là margin-left (right,top,bottom) đều có giá trị là 1px
- Nếu viết: margin:15px 10px; - có nghĩa là:
* margin-top và margin-bottom là 15px;
* margin-left và margin-right là 10px.
- Nếu viết: margin:15px 10px 5px; - có nghĩa là:
* Margin-top = 15px
* Margin-right = 10px
* Margin-bottom = 5px
* Margin-left = 10px
- Nếu viết: margin:15px 10px 20px 5px; - có nghĩa là:
* Margin-top = 15px
* Margin-right = 10px
* Margin-bottom = 20px
* Margin-left = 5px
Cách viết cho Padding cũng tương tự như vậy. các bạn chỉ cần thay từ Margin bằng Padding mà thôi !
Các bạn hãy xem ảnh dưới đây để thấy tác dụng của Padding và Margin
Các bạn hãy xem ảnh dưới đây để thấy tác dụng của Padding và Margin
Sử dụng margin-right:10px
Sử dụng margin-right:200px để kéo ảnh lại sát chữ
Sử dụng margin-right:-50px (để đưa chữ nằm giữa ảnh) và padding-right:40px; (để đưa chữ cách xa ảnh)
Đăng nhận xét
1- Nhận xét chỉ nên liên quan đến bài đăng, phải có tính chất xây dựng và có văn hóa !
2- Để chèn biểu tượng cảm xúc vào nhận xét, các bạn nhập các ký hiệu bên dưới của hình vào phần viết nhận xét.
3- Việc nhập tài khoản Google của bạn và nhập 2 từ xác minh trước lúc gửi nhận xét là bắt buộc !
4- Các bạn có thể chèn Video trên Youtube hay ảnh bằng cách dán link của video (trên thanh địa chỉ) hay link ảnh trực tiếp ở khung soạn thảo nhận xét !
5-Các bạn có thể post code trong nhận xét nhưng phải mã hóa code trước ! Để mã hóa code các bạn vào đây