- Để có thể cân đối các vị trí của các thành phần trong blog hay web thì thuộc tính margin và padding đóng vai trò không nhỏ. Nếu bạn đã quen với việc thiết kế, quen với các mã css thì chắc hẳn bạn đã rỏ thuộc tính này. Tuy nhiên, nếu bạn mới làm quen thì nó là một vấn đề không nhỏ. Hôm nay mình sẽ giới thiệu về 2 thuộc tính này để giúp bạn hiểu rỏ hơn và áp dụng trong việc chỉnh sửa bố cục cho blog hay web của mình.
Margin và
Padding là 2 thuộc tính giúp chúng ta có thể dễ dàng kiểm soát khoảng cách giữa cách khối hay các thành phần của trang.
Margin và
Padding đều có 4 giá trị tương ứng với 4 phía của trang (ở trên (top), bên trái (left), bên phải (right) và ở dưới (bottom) của trang). Bạn có thể xem ảnh bên dưới
Hình ảnh minh họa
I. Thuộc tính Margin
Margin là một thuộc tính giúp bạn canh lề cho một khối, hay một thành phần nào đó của trang.
Margin có 4 giá trị trên, phải, dưới, trái.
- Khi có đủ 4 giá trị (margin: 3px 5px 10px 6px;): Khi trong margin có 4 giá trị như trên thì bạn đã canh lề trên (3px), lề phải (5px), bên dưới (10px), lề trái (6px).
- Khi có 3 giá trị (margin: 3px 4px 8px;): Như vậy là bạn đã canh cho lề các giá trị lề trên (3px), bên phải và trái là (4px) và ở dưới là (8px).
- Khi có 2 giá trị (margin:10px 20px;): Như vậy các lề trên và dưới nhận giá trị (10px), lề trái và phải có giá trị (20px).
- Khi chỉ có 1 giá trị (margin: 25px;): Trường hợp này thì các lề trên, phải, dưới, trái đều nhận một giá trị bằng nhau là
25px.
Ngoài ra, bạn cũng có thể định giá trị cho các lề như bên dưới
margin-left:10px; //lề trái
margin-right:20px; //lề phải
margin-top:15px; //ở trên
margin-bottom:5px; //bên dưới.
II. Thuộc tính Padding
Margin là thuộc tính canh lề cho một khối hay một thành phần của trang thì
Padding sẽ canh khoảng cách giữa nội dung trong một khối hay một thành phần nào đó của trang. Khoảng cách này là khoảng cách từ biên đến nội dung bên trong khối hay thành phần của trang.
Giống như thuộc tính
margin,
padding cũng có 4 giá trị tương ứng với 4 lề trong khối hay thành phần của trang. Và đặc tính của nó cũng giống như
margin; nó canh trên, phải, dưới, trái tương ứng với 4 giá trị (ví dụ:
padding: 12px 16px 10px 3px;), nó sẽ định các giá trị tương ứng là trên (
12px), phải (
16px), dưới (
10px), trái (
3px), trường hợp chỉ có 1, 2 hay 3 giá trị cũng tuơng tự margin. Và bạn cũng có thể xác định giá trị của từng lề như margin.
padding-left:10px; //lề trái
padding-right:20px; //lề phải
padding-top:15px; //ở trên
padding-bottom:5px; //bên dưới.
Ở trên mình đã giới thiệu đến bạn 2 thuộc tính cơ bản trong việc tạo khoảng cách giữa các khối hay các thành phần trong blog hay web. Nó chỉ là cơ bản nhưng đóng vai trò rất quan trọng trong việc tạo sự cân đối cho các thành phần của trang.
- Hôm nay mình xin chia sẻ cùng các bạn cách tạo nền "Bão lửa" bằng Photoshop, bài viết này mình tham khảo và thực hành theo Quản trị mạng. Mình thấy nó khá hay và xin chia sẻ lại cho các bạn tham khảo.
Toolbox là nơi bạn có được tất cả các thao tác xử lý ảnh từ trò chuột. Theo mặc định, nó bị khóa ở phía cạnh trái của màn hình làm việc. Bằng cách nhấp vào phím mũi tên (<<) bạn có thể mang toolbox này đặt tại bất kỳ vị trí nào trên phần không gian làm việc. Ở Toolbox chứa tất cả các công cụ giúp việc chỉnh sửa hình ảnh của bạn trở nên dễ dàng và nhanh chóng hơn. Bây giờ chúng ta sẽ tìm hiểu về các công cụ có trong Toolbox này.
Rectangular Marquee Tool (phím tắt: M): Đây là công cụ lựa chọn dạng cơ bản, lựa chọn vùng theo dạng hình khối cơ bản (có thể là hình chữ nhật, elip, 1 dòng đơn hoặc 1 cột đơn. Nếu muốn lựa chọn theo dạng hình vuông hoặc hình tròn cân đối thì giữ Shift trong quá trình khoanh vùng. Nếu muốn thay đổi khung chọn giữa hình chữ nhật và hình ellip thì nhấn Shift + M (hoặc chuột phải vào biểu tượng công cụ trên thanh Toolbox và chọn hình như ý).
- Để có thể cân đối các vị trí của các thành phần trong blog hay web thì thuộc tính margin và padding đóng vai trò không nhỏ. Nếu bạn đã quen với việc thiết kế, quen với các mã css thì chắc hẳn bạn đã rỏ thuộc tính này. Tuy nhiên, nếu bạn mới làm quen thì nó là một vấn đề không nhỏ. Hôm nay mình sẽ giới thiệu về 2 thuộc tính này để giúp bạn hiểu rỏ hơn và áp dụng trong việc chỉnh sửa bố cục cho blog hay web của mình.
