Margin và padding trong CSS

Như đã giới thiệu ở bài trước, trong bài học này chúng ta sẽ cùng tìm hiểu chi tiết về 2 thành phần margin và padding của mô hình hộp.

1. Thuộc tính margin:

Như tất cả những ai đã học qua MS Word đều biết là trong phần thiết lập Page Setup của Word cũng có một thiết lập margin để định lề cho trang in. Tương tự, thuộc tính margin trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang. Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web.

body {
margin-top:80px;
margin-bottom:40px;
margin-left:50px;
margin-right:30px;
}

Hoặc gọn hơn chúng ta sẽ viết như sau:

body {
margin:80px 30px 40px 50px;
}

Giá trị đầu tiên tương ứng với magin-top (80px), giá trị thứ hai tương ứng với margin-right (30px)....

Cú pháp viết giản lược sẽ như sau: margin-top margin-right margin-bottom margin-left

Nếu ta viết thế này: margin: value1 value 2;
thì trình duyệt sẽ hiểu như sau:

value 1 là margin-top và margin-bottom
value 2 là margin-top và margin-right

2. Thuộc tính padding:

Padding có thể hiểu như là một thuộc tính đệm. Padding không ảnh hưởng tới khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng (xem lại ảnh minh họa về boxmodel).

Cú pháp viết ngắn gọn cũng giống như margin.

Padding: padding-top padding-right padding-bottom padding-left.

Trở về trang chủ Trở về trang mục lục Top