31 Oct

Thuộc tính margin và padding trong css 5.00/5 (100.00%) 3 votes

thuộc tính margin và padding trong css được dùng để chỉnh sữa các thành phần của website vào đúng các vị trí mà ta mong muốn. nay mình sẽ nói rõ cho các bạn hiểu về hai thuộc tính này.

  1. thuộc tính margin Được dùng để tạo khoảng cách với các thành phần bên ngoài HTML. Khi ta khai báo thuộc tính margin cho một thành phần nào đó thì nó sẽ tạo ra một khoảng cách giữa các thành phần đó với các thành phần xung quanh nó (top, right, bottom và left) tạo sự phân chia các thành phần của web dễ nhìn hơn.có 4 loại margin:
    – margin-top: ..px;
    – margin-right: ..px;
    – margin-bottom: ..px;
    – margin-left: ..px;Vd: mình sẽ tạo ra khoảng cách margin-top: 50px;   margin-lest: 100px; chúng ta cùng xem kết quả của việc sử dụng thuộc tính margin nào

    thuộc tính margin trong css

    thuộc tính margin trong css

    Và đây là code để tạo được như trên. ở đây mình có sử dụng thẻ <div> mà trong bài viết trước có nói đến

    Ngoài ra bạn cũng có thể viết tắt như sao: margin: 50px 0px 0px 100px; theo thứ tự là top left bottom right. Kết qua như thế nào các bạn. Có phải y như chúng ta khai báo từng cái riêng lẽ không nào.

  2. Thuôc tính padding Được dùng để tạo khoảng cách với các thành phần bên trong HTML. Thuộc tính padding sẽ không ảnh hưởng tới khoảng cách giữa các đối tượng như margin mà nó chỉ quy định khoảng cách giữa nội dung và đường viền. cú pháp giống như margin.cũng tương tự margin, padding cũng có 4 loại
    – padding -top: ..px;
    – padding -right: ..px;
    – padding -bottom: ..px;
    – padding -left: ..px;Vd: mình sẽ minh họa cho các bạn thấy cách sữ dụng padding trong css. ở đây mình sẽ tạo ra padding -top: 20px; padding -left: 20px;

    Thuộc tính padding trong css

    Thuộc tính padding trong css

    Đây là code cho thuộc tính padding trong css

    Các bạn có thấy gì khác không??? mình chắc là sau khi xem code các bạn sẽ nhận ra một điều là height: 80px; và width 180px; nhưng lại cho ta đúng kích thước height: 100px; và width: 200px; đó là do sử dụng thuộc tính padding, khi ta sử dụng thì thuộc tính height và width sẽ cộng thêm px của padding vào.

    Ngoài ra bạn cũng có thể viết tắt thuộc tính padding như sau: padding: 20px 0px 0px 20px; cũng theo thứ tự là top right bottom left.

    Một số từ khóa bạn có thể tim kiếm
    -thuoc tinh margin va padding
    -thuoc tinh margin va padding trong css
    -thuoc tinh margin trong css
    -margin css
    -thuộc tính padding
    -thuộc tính padding trong css
    -các thuộc tính padding
    -padding trong css
    -padding và margin

Thông tin
Ngày tháng
Chuyên mục
Học Viên Trung Tâm đánh giá
Đánh giá
5