• 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

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.

Cách Làm ảnh đại Diện Trên Facebook

Hướng dẫn các cách làm ảnh đại diện trên facebook mới nhất 2020

27/11/2019
Cách Tạo Template Trong Word

Hướng dẫn các cách tạo template trong word mới nhất

02/12/2019
Hiện đường Lưới Trong Excel 2007

Những kiểu hiện đường lưới trong excel 2007 thường gặp.

19/11/2019
Sàn Thương Mại điện Từ Là Gì

sàn thương mại điện tử là gì ? vai trò của sàn giao dịch điện tử mới nhất 2020

30/10/2019
Sku Sản Phẩm Shopee Là Gì

sku sản phẩm shopee là gì? tìm hiểu thêm về sku sản phẩm shopee

27/11/2019
Tổng Hợp Những Cách đầu Tư Làm Giàu Mới Nhất 2020

Tổng hợp những cách đầu tư làm giàu mới nhất 2020

17/02/2021
Content Marketing

Các dạng Content Marketing

02/12/2020
Tổng Hợp Cách Lập Kế Hoạch Kinh Doanh Bán Hàng Mới Nhất 2020

Tổng hợp cách lập kế hoạch kinh doanh bán hàng mới nhất 2020

01/12/2019
3 / 5 ( 338 votes )

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.