Nói đến thiết kế web là chúng ta thường nghĩ đến bố cục, hình khối, các mảng màu sắc và các dòng chữ. Việc tạo ra bố cục của một website rất quan trọng, nó cho ta nắm rõ được những vị trí một cách cơ bản của một hay nhiều đối tượng trên một trang văn bản web. Các đối tượng này nằm ở những vị trí mà ta quy định cho chúng, hay nói một cách đơn giản là các khối văn bản, module hay hình ảnh được sắp xếp một cách tương quan với nhau trên suốt một giao diện web.
Trong phần này chúng ta cùng tìm hiểu 2 thuộc tính quan trọng và thường được sử dụng nhiều nhất trong một file CSS. Bởi khi nắm rõ và sử dụng thuần thục 2 thuộc tính này cũng có nghĩa là bạn đã kiểm soát được một trong những vũ khí mạnh nhất của CSS.
Để tìm hiểu rõ hai thuộc tính này chúng ta nên nghiên cứu qua tác dụng của nó và đó cũng chính là mấu chốt để ta nắm quyền kiểm soát. Trước tiên margin và padding là 2 thuộc tính dùng để quy định khoảng cách giữa các khối, các thành phần. Nó được sử dụng cho mọi đối tượng trên trang web cho dù là mảng lớn hay những chi tiết nhỏ.
Hình minh họa dưới đây được biểu diễn đơn giản bằng hai khối A, B
Để điều chỉnh khoảng cách giữa khối A và khối B thì ta có thể sử dụng một trong 2 hoặc đồng thời cả thuộc tính margin và padding. Khi đó ta viết một đoạn (X)HTML như sau:
Trước tiên với thuộc tính padding ta sẽ style cho khối A giữ nguyên vị trí và đẩy khối B ra một khoảng bằng 60px.
Với dòng lệnh CSS sử dụng thuộc tính padding thì khối B sẽ bị đẩy sang bên phải một khoảng cách là 60px. Nhưng rõ ràng là 60px đó là do khối B tự đẩy mình sang bên phải bằng cách thêm vào bên trái một khoảng cách 60px. Và 60px đó sẽ được cộng vào với chiều rộng của khối B để thành một chiều rộng mới. Như vậy nếu chiều rộng của khối B là 100px thì bây giờ chiều rộng của khối B sẽ là 100px + 60px = 160px. Đó chính là mấu chốt khiến các bạn mới làm quen thường bị xảy ra hiện tượng xô lệch do khi dùng padding vì chúng ta padding bao nhiêu thì sẽ + thêm vào chiều rông cũ bấy nhiêu để tạo thành một chiều rộng mới.
Bây giờ ta sẽ sử dụng với thuộc tính margin để làm ra kết quả tương tự là cho khối A giữ nguyên vị trí và đẩy khối B ra một khoảng bằng 60px.
Với dòng lệnh trên sử dụng margin thì ta cũng có kết quả tương tư nhưng chiều rộng (thông số width) của khối B vẫn được bảo toàn là 100px;
Trong phần này chúng ta cùng tìm hiểu 2 thuộc tính quan trọng và thường được sử dụng nhiều nhất trong một file CSS. Bởi khi nắm rõ và sử dụng thuần thục 2 thuộc tính này cũng có nghĩa là bạn đã kiểm soát được một trong những vũ khí mạnh nhất của CSS.
Để tìm hiểu rõ hai thuộc tính này chúng ta nên nghiên cứu qua tác dụng của nó và đó cũng chính là mấu chốt để ta nắm quyền kiểm soát. Trước tiên margin và padding là 2 thuộc tính dùng để quy định khoảng cách giữa các khối, các thành phần. Nó được sử dụng cho mọi đối tượng trên trang web cho dù là mảng lớn hay những chi tiết nhỏ.
Hình minh họa dưới đây được biểu diễn đơn giản bằng hai khối A, B
{mosimage}
Để điều chỉnh khoảng cách giữa khối A và khối B thì ta có thể sử dụng một trong 2 hoặc đồng thời cả thuộc tính margin và padding. Khi đó ta viết một đoạn (X)HTML như sau:
<div id="khoi-a">Khối A</div><div id="kho-b">Khối B</div>
Trước tiên với thuộc tính padding ta sẽ style cho khối A giữ nguyên vị trí và đẩy khối B ra một khoảng bằng 60px.
#khoi-b {padding-left: 60px;}
{mosimage}
Với dòng lệnh CSS sử dụng thuộc tính padding thì khối B sẽ bị đẩy sang bên phải một khoảng cách là 60px. Nhưng rõ ràng là 60px đó là do khối B tự đẩy mình sang bên phải bằng cách thêm vào bên trái một khoảng cách 60px. Và 60px đó sẽ được cộng vào với chiều rộng của khối B để thành một chiều rộng mới. Như vậy nếu chiều rộng của khối B là 100px thì bây giờ chiều rộng của khối B sẽ là 100px + 60px = 160px. Đó chính là mấu chốt khiến các bạn mới làm quen thường bị xảy ra hiện tượng xô lệch do khi dùng padding vì chúng ta padding bao nhiêu thì sẽ + thêm vào chiều rông cũ bấy nhiêu để tạo thành một chiều rộng mới.
Bây giờ ta sẽ sử dụng với thuộc tính margin để làm ra kết quả tương tự là cho khối A giữ nguyên vị trí và đẩy khối B ra một khoảng bằng 60px.
#khoi-b {margin-left: 60px;}
{mosimage}
Với dòng lệnh trên sử dụng margin thì ta cũng có kết quả tương tư nhưng chiều rộng (thông số width) của khối B vẫn được bảo toàn là 100px;
Sự khác biệt giữa Margin và Padding
Sử dụng padding là tự thêm vào khoảng cách và đẩy các thành phần nằm bên trong vào một khoảng cách xác định và khoảng cách đó được cộng thêm vào kích thước cũ để tạo thành kích thước mới bẳng tổng của khoảng cách padding và kích thước cũ. Còn sử dụng margin là thêm vào khoảng cách bên ngoài các thành phần năm bên trọng một khoảng xác định và kích thước của nó luôn được bảo toàn.
graphiclancer.com
