• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020

ATPMedia Bởi ATPMedia
13/11/2019
Trang chủ Kiến thức CSS
Rate this post

thuộc tính margin và padding trong css là một trong những từ khóa được search nhiều nhất trên google về chủ đề thuộc tính margin và padding trong css. Trong bài viết này, xaydungweb.vn sẽ viết bài Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020

Thuộc Tính Margin Và Padding Trong Css

Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020

Padding và Margin là hai tính chất thường được sử dụng trong CSS. bên cạnh đó rất nhiều bạn vẫn không phân biệt được sự khác nhau giữa hai tính chất này. Để hiểu rõ được sự khác biệt thì bạn cần nắm vững được khái niệm cần thiết trong CSS là box model.

Box Model

Trên trang HTML, mỗi phần tử của trang được đại diện bởi một hình chữ nhật. Trong CSS các ảnh chữ nhật này được xem như một chiếc hộp và thuật ngữ box model được sử dụng để chỉ các hộp này:

CSS Box Model

CSS Padding

Padding (khoảng đệm) là thuộc tính được sử dụng để tạo khoảng trống tính từ đường viền của phần tử cho tới nội dung phần tử. gợi ý nếu bạn có một đoạn văn bản và phần tử tương ứng với đoạn văn bản là p, văn bản có click thức là 13px và khoảng đệm trên dưới là 2px và phải trái là 3px sử dụng luật CSS giống như sau:

p font-size: 13px;padding: 2px3px2px3px;

Lúc này thì tổng chiều cao của phần tử tính tới đường viền lúc này sẽ là 13px + 2px (trên) + 2px (dưới) = 17px.

hiển nhiên bạn cũng hoàn toàn đủ sức chỉ dùng khoảng đệm trên (padding-top) hoặc tương tự chỉ sử dụng khoảng đệm dưới (padding-bottom), khoảng đệm trái (padding-left) và khoảng đệm phải (padding-right):

p font-size: 13px;padding-top: 2px;padding-bottom: 2px;

tính chất height của CSS sử dụng để xác định chiều cao của phần tử gồm có cả khoảng đềm của phần tử (hay tính đến đường viền)

CSS Margin

Margin (lề) là tính chất được dùng để tạo khoảng trống tính từ đường viền của phần tử ra phía ngoài. luôn luôn sử dụng gợi ý trên nếu bạn tạo lề trên và lề dưới của phần tử là 2px và lề phải và lề trái là 3px luật CSS như sau:

p font-size: 13px;padding: 2px3px;margin: 2px3px;

Lúc này phần tử luôn luôn có chiều cao tổng cộng là 17px bên cạnh đó sẽ có thêm một khoảng trống là 2px với các phần tử phía trước nó, 3px với các phần tử phía dưới nó, 3px cho các phần tử bên trái và bên phải.

Nguồn: https://www.codehub.vn/

 

Tags: margin auto trong cssmargin cssmargin paddingmargin trong csspadding and margin csspadding cssposition trong cssthuộc tính margin và padding trong cssý nghĩa của margin và padding
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Array Push Trong Php

Hướng dẫn dùng array_push trong php mới nhất 2020

Bài Viết Mới.

Tổng Hợp Bài Học Cách Kinh Doanh Làm Giàu Của Các Tỷ Phú Mới Nhất 2020

Tổng hợp bài học cách kinh doanh làm giàu của các tỷ phú mới nhất 2020

30/11/2019
Bài Học Kinh Nghệm Cho Người Mới Khởi Nghiệp

Những bài học cho người bắt đầu khởi nghiệp kinh doanh

19/08/2020
Thiet Ke Web Xay Dung

Hướng dẫn thiet ke web xay dung mới nhất 2020

24/11/2019
Xử Lý Chuỗi Trong Jquery

Hướng dẫn xử lý chuỗi trong jquery mới nhất 2020

22/11/2019
Cách Kích Hoạt Iphone Lock

những cách kích hoạt iphone lock nhanh nhất hiệu quả nhất 2020

30/11/2019
Cách Chỉnh Sửa Code Của Web

Tổng hợp cách chỉnh sửa code của web mới nhất 2020

21/11/2019
Seo Vietmoz (1)

Từ cậu học trò dốt đến chuyên gia SEO hàng đầu, câu chuyện dành cho những người nỗ lực

16/07/2020
Cách Mở Khóa Iphone

Tổng hợp các cách mở khóa iphone mới nhất 2020

04/12/2019

XÂY DỰNG WEBSITE

Coder.com.vn là Blog chia sẻ kiến thức học lập trình miễn phí. Chuyên tổng hợp các bài viết về tài liệu học lập trình, với mong muốn tất cả mọi người ở khắp nơi trên thế giới được học lập trình miễn phí.

Chuyên mục

  • Trang Chủ
  • Source Web
  • Kiến Thức Seo
  • Bảo Mật Website
  • Tài Liệu Làm Web
  • Xây Dựng Website

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Topvui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.