Margin và padding

Một phần của tài liệu Bài giảng phân tích ứng dụng web (Trang 39 - 40)

CHƯƠNG 4: CASCADING STYLE SHEETS 4.1 Giới thiệu

4.4.8Margin và padding

Margin sẽ tạo ra một khoảng trống trong suốt bao quanh border với một độ dày nhất định, những độ dày đó có thể khác nhau theo các chiều. cú pháp được xây dựng như sau:

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Các giá trị cơ bản của margin có thể có là : - auto: Trình tuyệt sẽ tự động tính toàn giá trị .

- length: các đơn vị thường dùng là px, pt, cm… giá trị mặc định là 0px. - % : giá trị của margin sẽ được tính bằng phần trăm của thẻ bao quanh nó. - inherit: giá trị của margin sẽ được kế thừa từ phần tử cha.

4.4.9 Border

Border trong CSS có thể được tùy biến với các thuộc tính về màu sắc và kiểu. border-style

dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border

groove: Defines a 3D grooved border. The effect depends on the border-color value ridge: Defines a 3D ridged border. The effect depends on the border-color value

inset: Defines a 3D inset border. The effect depends on the border-color value outset: Defines a 3D outset border. The effect depends on the border-color value

Border Width

Xác định chiều rộng của border. Lưu ý để có thể định được border width ta bắt buộc phải định nghĩa border style trước.

p.one {

border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } 4.4.10 Height và Width

Một block trong CSS có thể định nghĩa được chiều cao và chiêu rộng thông qua height và width thuộc tính. Dưới đây là bảng các thuộc tính và giá trị có thể có:

Thuộc tính Giải thích Giá trị

height Định chiều cao của đối tượng Auto,length, %,inherit

max-height Định chiều cao lớn nhất của đối tượng Auto,length, %,inherit max-width Định chiều rộng lớn nhất của đối tượng Auto,length, %,inherit min-height Định chiều cao nhỏ nhất của đối tượng Auto,length, %,inherit min-width Định chiều rộng nhỏ nhất của đối tượng Auto,length, %,inherit

width Định chiều rộng của đối tượng Auto,length, %,inherit

Một phần của tài liệu Bài giảng phân tích ứng dụng web (Trang 39 - 40)