Bài 10: Margin và Padding trong Css

Đăng ngày: 04 Tháng 3 2014
Đánh giá bài này
(0 bình chọn)
Margin và Padding trong Css Margin và Padding trong Css

Hiện nay, việc sử dụng CSS trong khi thiết kế web khá quan trọng, nó giúp chúng ta giảm thiểu khá nhiều công đoạn so với trước đây khi thiết kế bằng table.

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.

Hai thẻ margin và padding được dùng để định dạng khoảng cách giữa các thành phần trong trang web với một mục tiêu cố định nào đó. Việc sử dụng hai thẻ này có tác dụng khá tốt trong việc xây dựng nền tảng khi thiết kế website.

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;

border:1px dotted #FF0000

}

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

body {

margin:80px 30px 40px 50px;

border:1px dotted #FF0000

 }

 Cú pháp như sau:

margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left>

Hoặc: margin:<value1>|< value2> – với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.

Ví dụ kế tiếp sẽ thể hiện rõ hơn về việc dùng margin để canh lề cho các đối tượng trong trang web. Các bạn hãy quan sát các đường viền và nhận xét.

body {

margin:80px 30px 40px 50px;

 border:1px solid #FF0000 }

 #box1 {

 margin:50px 30px 20px 40px;

border:1px solid #00FF00

}

#box2 {

margin:50px 30px 20px 40px;

 border:1px solid #0000FF

}

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.

Cú pháp: Tương tự margin.

Padding:<padding-top> | <padding-right> | <padding-bottom> | <padding-left> Các bạn hãy thử thực hiện lại 2 ví dụ ở phần margin, nhưng thay margin bằng padding, nhớ quan sát vị trí đường viền.

2 ý kiến

  • dạy bơi
    đăng bởi dạy bơi
    Thứ tư, 05 Tháng 3 2014 21:53

    Bạn giải thích rõ hơn được không?

    Cảnh báo
  • truyen cuoi
    đăng bởi truyen cuoi
    Thứ ba, 04 Tháng 3 2014 18:09

    Hơi khó hiểu trong việc định hình sẽ đưa nó vào đâu.
    Cái này nếu làm trên trình duyệt bị khúc mắc một tí với những loại theme Frame Work của Wordpress.
    Mình edit css trên trình duyệt thì nó không thay đổi, quá chán

    Cảnh báo

Gửi bình luận

Hãy nhập đầy đủ các thông tin yêu cầu trong ô có dấu (*). Không được phép sử dụng mã HTML.

LIKE để ủng hộ bạn nhé!

 

Tham gia diễn đàn seo hàng đầu Việt Nam

Has no content to show!