Specify the Gap Between Columns


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
 Nội dung chính Show
 
CSS của thuộc tính letter-spacing có dạng
Mô hình hộp CSS
vàTrang web sẽ hiển thị một hộp màu vàng chứa nội dung văn bản bạn đã thêm vào file HTML. Hiện tại, chỉ hộp trong cùng - hộp nội dung - có kích thước và giá trị; phần đệm, đường viền và lề đều được đặt thành 0. Cũng lưu ý chiều rộng và chiều cao của hộp màu vàng được tự động xác định bởi kích thước của nội dung văn bản bên trong containers. Hãy thử thêm hoặc bớt nội dung văn bản để thử nghiệm xem kích thước của containersthay đổi như thế nào cho phù hợp.Lưu ý : Bạn có thể sử dụng công cụ Nhà phát triển Web của Firefox để xem mô hình hộp của phần tử HTML và các giá trị được đặt cho mỗi hộp. Điều hướng đến mục menu Công cụ ở thanh menu trên cùng và chọn Công cụ phát triển / chuyển đổi web từ menu thả xuống. Công cụ dành cho nhà phát triển sẽ xuất hiện ở cuối cửa sổ của bạn. Nhấp vào biểu tượng mũi tên ở ngoài cùng bên trái của bộ công cụ và sau đó nhấp vào phần tử bạn muốn kiểm tra. Mô hình hộp của phần tử đã chọn sẽ hiển thị ở phía dưới bên phải của ngăn cửa sổ Công cụ dành cho nhà phát triển. Bạn có thể cần phải mở rộng cửa sổ để xem nó.Tiếp theo, hãy chỉ định chiều rộng của containersđể nghiên cứu cách mà điều đó thay đổi cách trình bày của phần tử trong trình duyệt. Thêm dòng được đánh dấu sau vào luật CSS trong file styles.css của bạn để đặt width thành 500 pixel:styles.css.yellow-div { background-color:yellow; width: 500px; }Lưu file và tải nó trong trình duyệt của bạn.chứabạn bây giờ phải rộng 500 pixel, với chiều cao tự động điều chỉnh để cho phép nội dung văn bản vừa với bên trong:Lưu ý bạn cũng có thể chỉ định chiều cao của phần tửthay thế và cho phép chiều rộng tự động điều chỉnh. Hoặc bạn có thể chỉ định cả chiều cao và chiều rộng, nhưng lưu ý nội dung sẽ tràn qua containersnếu phần tửquá nhỏ.Cách điều chỉnh kích thước đệm của phần tử HTML bằng CSS
Điều chỉnh kích thước đường viền, màu sắc và kiểu của một phần tử HTML bằng CSS
Điều chỉnh kích thước lề của một phần tử HTML bằng CSS
Kết luận
 

Xem ví dụ

Với CSS, nếu bạn muốn khoảng cách giữa các các ký tự cách xa ra hoặc gần lại trong cùng một từ thì sử dụng thuộc tính letter-spacing. Cũng có thể gọi nó là co giãn khoảng cách giữa các ký tự (các chữ cái) trong một từ.

Còn để tạo khoảng cách giữa các từ trong một câu hay đoạn văn bạn sử dụng thuộc tính word-spacing nhé !

CSS của thuộc tính letter-spacing có dạng

Đối tượng thường ứng dụng thuộc tính này là LOGO, slogan, hoặc một đoạn chữ mà bạn muốn nó nổi bật so với phần còn lại.

Hi there ! mình tạo 6 cái block con nằm trong 1 block cha như trong ảnh, không biết có thuộc tính CSS nào cho class cha để các block con tự động căn chỉnh khoảng cách mà mình không cần dùng margin và padding cho mỗi block con không ạ ? nếu dùng margin cho class con thì phải dùng đến 6 lần cho 6 khối @@
cảm ơn

Trước khi tiếp tục, ta khuyên bạn nên có một số kiến thức về HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Nếu bạn chưa quen với HTML, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài Cách tạo trang web với HTML trước khi bắt đầu loạt bài này.

Nội dung chính Show

• Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
• Mô hình hộp CSS
• Điều chỉnh kích thước nội dung của một phần tử HTML bằng CSS
• Cách điều chỉnh kích thước đệm của phần tử HTML bằng CSS
• Điều chỉnh kích thước đường viền, màu sắc và kiểu của một phần tử HTML bằng CSS
• Điều chỉnh kích thước lề của một phần tử HTML bằng CSS
• Kết luận
• Video liên quan

Trong hướng dẫn này, bạn sẽ tìm hiểu về Mô hình Hộp CSS , một mô hình được sử dụng để tham chiếu đến nội dung, phần đệm, đường viền và lề của một phần tử HTML. Việc hiểu Mô hình hộp CSS rất hữu ích để điều chỉnh kích thước của bất kỳ phần nào trong số các phần này của phần tử HTML và hiểu cách xác định kích thước và vị trí của các phần tử. Hướng dẫn này sẽ bắt đầu bằng cách giải thích từng hộp của Mô hình hộp CSS và sau đó chuyển sang bài tập thực hành về cách điều chỉnh giá trị của chúng bằng cách sử dụng luật kiểu CSS.

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Mô hình hộp CSS

Phần tử HTML có thể được hiểu là một chuỗi bốn hộp chồng lên nhau:

• Hộp nội dung là hộp trong cùng nơi đặt nội dung văn bản hoặc hình ảnh. Theo mặc định, kích thước của nó thường được đặt bằng kích thước của nội dung mà nó chứa. Nó cũng là hộp duy nhất trong mô hình hộp có giá trị thường không bằng 0 theo mặc định (nếu nó chứa nội dung); ngược lại, phần đệm, đường viền và lề của một phần tử được mặc định bằng 0 đối với nhiều phần tử HTML (chẳng hạn như phần tử

  ,

  vàTrang web sẽ hiển thị một hộp màu vàng chứa nội dung văn bản bạn đã thêm vào file HTML. Hiện tại, chỉ hộp trong cùng - hộp nội dung - có kích thước và giá trị; phần đệm, đường viền và lề đều được đặt thành 0. Cũng lưu ý chiều rộng và chiều cao của hộp màu vàng được tự động xác định bởi kích thước của nội dung văn bản bên trong containers. Hãy thử thêm hoặc bớt nội dung văn bản để thử nghiệm xem kích thước của containersthay đổi như thế nào cho phù hợp.Lưu ý : Bạn có thể sử dụng công cụ Nhà phát triển Web của Firefox để xem mô hình hộp của phần tử HTML và các giá trị được đặt cho mỗi hộp. Điều hướng đến mục menu Công cụ ở thanh menu trên cùng và chọn Công cụ phát triển / chuyển đổi web từ menu thả xuống. Công cụ dành cho nhà phát triển sẽ xuất hiện ở cuối cửa sổ của bạn. Nhấp vào biểu tượng mũi tên ở ngoài cùng bên trái của bộ công cụ và sau đó nhấp vào phần tử bạn muốn kiểm tra. Mô hình hộp của phần tử đã chọn sẽ hiển thị ở phía dưới bên phải của ngăn cửa sổ Công cụ dành cho nhà phát triển. Bạn có thể cần phải mở rộng cửa sổ để xem nó.Tiếp theo, hãy chỉ định chiều rộng của containersđể nghiên cứu cách mà điều đó thay đổi cách trình bày của phần tử trong trình duyệt. Thêm dòng được đánh dấu sau vào luật CSS trong file styles.css của bạn để đặt width thành 500 pixel:styles.css.yellow-div { background-color:yellow; width: 500px; }Lưu file và tải nó trong trình duyệt của bạn.chứabạn bây giờ phải rộng 500 pixel, với chiều cao tự động điều chỉnh để cho phép nội dung văn bản vừa với bên trong:Lưu ý bạn cũng có thể chỉ định chiều cao của phần tửthay thế và cho phép chiều rộng tự động điều chỉnh. Hoặc bạn có thể chỉ định cả chiều cao và chiều rộng, nhưng lưu ý nội dung sẽ tràn qua containersnếu phần tửquá nhỏ.Cách điều chỉnh kích thước đệm của phần tử HTML bằng CSS

  Tiếp theo, hãy tăng kích thước phần đệm để nghiên cứu cách nó thay đổi cách hiển thị của phần tử

  . Thêm dòng được đánh dấu sau vào luật CSS trong file styles.css của bạn để đặt padding thành 25 pixel:

  styles.css

  .yellow-div { background-color:yellow; width: 500px; padding:25px; }

  Lưu file styles.css và reload index.html trong trình duyệt của bạn. Kích thước của hộp màu vàng phải được mở rộng để cho phép khoảng trống 25 pixel giữa nội dung văn bản và chu vi của hộp:

  Bạn có thể thay đổi kích thước của phần đệm bằng cách điều chỉnh kích thước giá trị của phần đệm. Bạn cũng có thể thay đổi kích thước phần đệm của các mặt cụ thể của phần tử bằng cách sử dụng các thuộc tính sau: padding-left , padding-right , padding-top , padding-bottom . Ví dụ: hãy thử thay thế khai báo padding:25px; trong file styles.css của bạn với đoạn mã được đánh dấu bên dưới:

  styles.css

  .yellow-div { background-color:yellow; width: 500px; padding-left:25px; padding-right: 50px; padding-top: 100px; padding-bottom: 25px; }

  Lưu file styles.css và tải index.html trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:

  Biết cách chỉ định kích thước phần đệm cho các cạnh riêng lẻ của một phần tử có thể hữu ích khi sắp xếp nội dung trên trang web.

  Điều chỉnh kích thước đường viền, màu sắc và kiểu của một phần tử HTML bằng CSS

  Bây giờ ta hãy thực hành cài đặt các giá trị cho đường viền của một phần tử HTML. Thuộc tính biên giới cho phép bạn cài đặt kích thước, màu sắc, và phong cách (chẳng hạn như solid , dashed , dotted , inset , và outset ) của một phần tử HTML. Ba giá trị này được đặt bằng cách gán chúng cho thuộc tính border như sau:

  selector { border: size style color; }

  Hãy thử thêm phần khai báo được đánh dấu sau đây để thêm đường viền đen liền mạch rộng năm pixel:

  styles.css

  .yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; }

  (Bạn có thể cần xóa các khai báo padding khác nhau của bạn từ phần hướng dẫn trước và thay thế chúng bằng khai báo padding:25px; để giữ cho bộ luật có thể quản lý được). Lưu file styles.css và reload index.html trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng của bạn bây giờ sẽ có đường viền với các giá trị bạn đặt trong luật CSS:

  Bạn có thể thử thay đổi các giá trị để nghiên cứu cách chúng thay đổi cách hiển thị của phần tử trong trình duyệt. Giống như với padding, bạn cũng có thể chỉ định cạnh đường viền mà bạn muốn điều chỉnh bằng các thuộc tính border-right , border-left , border-top , border-bottom .

  Điều chỉnh kích thước lề của một phần tử HTML bằng CSS

  Tiếp theo, hãy thử điều chỉnh kích thước của lề của một phần tử bằng CSS. Trong bài tập này, ta sẽ cung cấp cho các lề một giá trị rất lớn để có thể dễ dàng xem kích thước lề được hiển thị như thế nào trong trình duyệt. Thêm khai báo được đánh dấu sau vào bộ luật của bạn trong file styles.css để đặt lề thành 100 pixel:

  styles.css

  .yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; margin:100px; }

  Lưu file styles.css và reload index.html trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng phải di chuyển 100 pixel xuống dưới và 100 pixel sang bên phải để cho phép 100 pixel không gian lề giữa đường viền của nó và các cạnh của khung nhìn:

  Lưu ý : Bạn có thể nhận thấy rằng hộp màu vàng ban đầu có một khoảng trắng nhỏ lề giữa phía trên và bên trái của nó và các cạnh của khung nhìn. Lề này được tạo tự động bởi một số trình duyệt để tạo khoảng trống giữa các cạnh của khung nhìn và nội dung trang web. Bạn có thể loại bỏ lề này bằng cách đặt lề trên và lề trái bằng 0.
  

  Giống như phần đệm và đường viền, kích thước của các cạnh cụ thể của lề có thể được đặt bằng cách sử dụng margin-left , margin-right , margin-top và margin-bottom .

  Trước khi tiếp tục, hãy thêm một containers

  vào trang để nghiên cứu cách lề ảnh hưởng đến vị trí của nội dung lân cận. Không xóa bất kỳ thứ gì, hãy thêm bộ luật CSS bổ sung vào file styles.css của bạn:

  styles.css

  . . . .blue-div { height:100px; width:100px; background-color: blue; }

  Lưu file và quay lại index.html của bạn. Không xóa bất kỳ thứ gì, hãy thêm phần tử

  vào file của bạn và gán cho nó lớp blue-div :

  index.html

  Lưu index.html của bạn và tải nó trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

  Bây giờ, trình duyệt sẽ hiển thị một hộp màu xanh lam, rộng 100 pixel và cao 1000 pixel. Hộp màu xanh lam này phải thấp hơn hộp màu vàng 100 pixel tính theo lề của hộp màu vàng. Nói chung, theo mặc định, các phần tử xung quanh sẽ bị đẩy ra khỏi một phần tử do biên của nó. Tuy nhiên, hãy lưu ý lề của các phần tử liền kề thường sẽ chồng lên nhau do sự sụp đổ của lề. Kích thước của lề chồng chéo được xác định bằng kích thước của lề lớn nhất giữa hai phần tử.

  Kết luận

  Trong hướng dẫn này, bạn đã học về mô hình hộp CSS và cách điều chỉnh kích thước của từng thuộc tính nội dung, phần đệm, đường viền và lề của nó. Hiểu hoạt động của các thuộc tính này và cách đặt giá trị cho chúng rất hữu ích khi tổ chức và tạo kiểu nội dung trên trang web. Những kiến thức này sẽ hữu ích khi xây dựng trang web trình diễn trong các bài hướng dẫn còn lại. Trong hướng dẫn tiếp theo, bạn sẽ cài đặt một index.html để làm trang chủ của trang web.