Trong hướng dẫn này, bạn sẽ tìm hiểu về CSS Box Model, 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. Hiểu…

Bạn đang xem: thêm phần đệm vào đường viền css

Giới thiệu

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 quy tắc kiểu CSS.

Sơ đồ mô hình hộp CSS

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo rằng bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trong hướng dẫn trước của loạt bài này Cách thiết lập dự án thực hành CSS và HTML .

Mô hình hộp CSS

Một 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ư & lt; p & gt; , & lt; h1 & gt; & lt; img & gt; phần tử) trừ khi bạn chỉ định khác. Khi bạn đặt các giá trị cho chiều rộng và chiều cao của một phần tử, bạn thường thay đổi chiều rộng và chiều cao của hộp nội dung.
  • Hộp đệm là hộp chồng chéo thứ hai, bao gồm một không gian trong suốt bao quanh hộp nội dung. Theo mặc định, phần đệm của nhiều phần tử HTML được đặt thành 0. Việc tăng kích thước phần đệm của một phần tử sẽ làm tăng khoảng cách giữa hộp nội dung và hộp đường viền.
  • Hộp viền là hộp chồng chéo thứ ba bao quanh hộp đệm. Theo mặc định, giá trị đường viền của hầu hết các phần tử HTML được đặt thành 0. Việc tăng kích thước đường viền của phần tử sẽ tăng khoảng cách giữa hộp đệm và hộp lề. Lưu ý rằng bạn có thể điều chỉnh màu sắc, độ dày và kiểu của đường viền.
  • Hộp lề là hộp chồng chéo thứ tư và cuối cùng bao gồm không gian trong suốt bên ngoài đường viền của một phần tử. Theo mặc định, giá trị lề của một số phần tử HTML được đặt thành 0, mặc dù một số phần tử đã chỉ định giá trị lề làm giá trị mặc định của chúng, chẳng hạn như & lt; h1 & gt; đến & lt; h6 & gt; thẻ tiêu đề. Lề của hai yếu tố khác nhau đôi khi cũng được phép chồng lên nhau trong một hành vi được gọi là thu gọn lề. Khi điều này xảy ra, kích thước lề được mặc định bằng kích thước của lề của phần tử nào lớn nhất.

Bây giờ bạn đã quen thuộc với các thành phần của Mô hình hộp CSS, bạn có thể thực hành tạo kiểu cho các hộp khác nhau này để khám phá cách chúng hoạt động cùng nhau để bố trí và tạo kiểu cho một phần tử HTML. Bạn sẽ bắt đầu bằng cách tạo phần tử & lt; div & gt; có chứa nội dung văn bản, sau đó điều chỉnh giá trị của từng hộp này để giúp chứng minh vị trí của chúng trong một phần tử.

Điều chỉnh Kích thước Nội dung của Phần tử HTML bằng CSS

Trước tiên, hãy đảm bảo rằng bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trong hướng dẫn trước của loạt bài này Cách thiết lập dự án thực hành CSS và HTML cho bạn .

Xóa mọi thứ trong tệp styles.css của bạn (nếu tệp chứa nội dung từ các hướng dẫn trước) và thêm quy tắc CSS sau vào tệp styles.css của bạn:

styles.css

  

. yellow-div

{

background-color

:

màu vàng

;

}

Lưu tệp styles.css . Bạn vừa tạo một lớp bằng cách sử dụng bộ chọn lớp yellow-div . Bất kỳ phần tử & lt; div & gt; nào bạn gán cho lớp này sẽ có màu nền vàng.

Tiếp theo, xóa tất cả nội dung trong tệp index.html của bạn (ngoại trừ dòng đầu tiên của mã: & lt; link rel = "stylesheet" href = "css / styles.css "& gt;) và thêm đoạn mã sau:

index.html

  

& lt;

div

class

=

yellow-div

"

& gt;

Nỗi đau chính là tình yêu của nỗi đau, những vấn đề sinh thái chính, nhưng tôi cho loại thời gian này để rơi xuống, để một số nỗi đau và nỗi đau lớn. Vì vậy, phần lớn, bất kỳ ai trong chúng ta cũng sẽ thực hiện bất kỳ loại công việc nào ngoại trừ để tận dụng các mục tiêu từ nó. Nhưng nỗi đau trong phim là không thể lên án, trong niềm vui sướng nó muốn thoát khỏi nỗi đau bị cillum trong đau đớn, không có kết quả.

& lt; /

div

& gt;

Lưu tệp và tải nó trong trình duyệt. Bạn sẽ nhận được kết quả sau:

Trang web có văn bản màu vàng & lt; div & gt; container

Trang web của bạn 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 tệp HTML. Hiện tại, chỉ hộp trong cùng - hộp nội dung - có kích thước và giá trị; đệm, đường viền và lề đều được đặt thành 0. Cũng lưu ý rằng chiều rộng và chiều cao của hộp màu vàng được xác định tự động bởi kích thước của nội dung văn bản bên trong vùng chứa & lt; div & gt; . 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 vùng chứa & lt; div & gt; thay đổi như thế nào cho phù hợp.

Lưu ý : Bạn có thể sử dụng các công cụ Nhà phát triển Web của Firefox để xem mô hình hộp của một phần tử HTML và các giá trị được đặt cho mỗi hộp. Điều hướng đến mục menu Tools trong thanh menu trên cùng và chọn "Web Developer / Toggle Tools" 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. mô hình hộp của phần tử đã chọn sẽ hiển thị ở dưới cùng 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ó.

Gif sử dụng công cụ Nhà phát triển Web Firefox để xem mô hình hộp của một phần tử

Tiếp theo, hãy chỉ định chiều rộng của vùng chứa & lt; div & gt; để nghiên cứu cách đ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 quy tắc CSS trong tệp styles.css của bạn để đặt width thành 500 pixel:

styles.css

  

. yellow-div

{

background-color

:

màu vàng

;

width

:

500px

;

}

Lưu tệp và tải nó trong trình duyệt của bạn. Vùng chứa & lt; div & gt; của bạn hiện 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:

Trang web có vùng chứa văn bản rộng 500 pixel

Lưu ý rằng bạn cũng có thể chỉ định chiều cao của phần tử & lt; div & gt; 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 ý rằng nội dung sẽ tràn qua vùng chứa & lt; div & gt; nếu phần tử & lt; div & gt; quá nhỏ.

Cách Điều chỉnh Kích thước Phần đệ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ử & lt; div & gt; . Thêm dòng được đánh dấu sau vào quy tắc CSS trong tệp styles.css của bạn để đặt padding thành 25 pixel:

  

[nhãn styles.css] .yellow-div

{

background-color

:

màu vàng

;

width

:

500px

;

padding

:

25px

;

}

Lưu tệp styles.css và tải lại index.htmltệp 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 để có khoảng trống 25 pixel giữa nội dung văn bản và chu vi của hộp:

Trang web có vùng chứa màu vàng với chiều rộng và phần đệm được chỉ định

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 tệp styles.css của bạn bằng đoạn mã được đánh dấu bên dưới:

  

[nhãn styles.css] .yellow-div

{

background-color

:

màu vàng

;

width

:

500px

;

padding-left

:

25px

;

padding-right

:

50px

;

padding-top

:

100px

;

padding-bottom

:

25px

;

}

Lưu tệp styles.css và tải tệp index.html trong trình duyệt của bạn. Bạn sẽ nhận được một cái gì đó như thế này:

Trang web có vùng chứa & lt; div & gt; màu vàng với các giá trị đệm khác nhau được đặt cho mỗi bên

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 Phần tử HTML bằng CSS

Bây giờ chúng ta hãy thực hành đặt giá trị cho đường viền của phần tử HTML. Thuộc tính border cho phép bạn đặt kích thước, màu sắc và kiểu (chẳng hạn như solid , dashed , dotted , inset < / code> 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 một đường viền đen liền mạch rộng năm pixel:

styles.css

  

. yellow-div

{

background-color

:

màu vàng

;

width

:

500px

;

padding

:

25px

;

border

:

5px đen đặc

;

}

(Bạn có thể muốn xóa các khai báo padding khác nhau của mình khỏi phần hướng dẫn trước và thay thế chúng bằng khai báo padding: 25px; duy nhất để giữ cho bộ quy tắc có thể quản lý được). Lưu tệp styles.css và tải lại 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 quy tắc CSS:

Trang web có màu vàng, đệm và đường viền

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 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, chúng tôi sẽ cung cấp giá trị lề 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ộ quy tắc của bạn trong tệp styles.css để đặt lề thành 100 pixel:

styles.css

  

. yellow-div

{

background-color

:

màu vàng

;

width

:

500px

;

padding

:

25px

;

border

:

5px đen đặc

;

margin

:

100px

;

}

Lưu tệp styles.css và tải lại 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 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:

Trang web có đệm, đường viền, lề được chỉ định

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 một số trình duyệt tạo tự động để 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 không.

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 < / code> và margin-bottom .

Trước khi tiếp tục, hãy thêm một vùng chứa & lt; div & gt; khác 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ộ quy tắc CSS bổ sung vào tệp styles.css của bạn:

styles.css

  

. . . .blue-div

{

height

:

100px

;

width

:

100px

;

background-color

:

blue

;

}

Lưu tệp và quay lại tệp index.html của bạn. Không xóa bất kỳ thứ gì, hãy thêm phần tử & lt; div & gt; sau vào tệp của bạn và gán cho nó lớp blue-div :

index.html

 

& lt;

div

class

=

"

blue-div < p class = "dấu chấm câu"> "

& gt;

& lt; /

div

& gt;

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

Hai vùng chứa có khoảng cách lề giữa chúng

Bây giờ, trình duyệt sẽ hiển thị một hộp màu xanh lam có chiều rộng 100 pixel và chiều 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ử theo biên độ của nó. Tuy nhiên, hãy lưu ý rằng lề của các phần tử liền kề thường sẽ chồng chéo 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 yếu tố.

Kết luận

Trong hướng dẫn này, bạn đã tìm hiểu 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ẽ thiết lập tệp index.html để làm trang chủ của trang web.


Xem thêm những thông tin liên quan đến chủ đề thêm phần đệm vào đường viền css

CSS Padding

alt

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-08-17
  • Đánh giá: 4 ⭐ ( 6485 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu các thuộc tính padding trong CSS giúp điều chỉnh vùng đệm giữa nội dung và đường viền của các phần tử trên trang web: padding-top, padding-bottom, padding-left, padding-right, padding.

    css html nguyenthithuylien

Đường viền CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 9907 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách sử dụng đường viền (border) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 5031 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tìm hiểu cách sử dụng CSS để chuẩn hóa lề, đệm và viền

  • Tác giả: www.greelane.com
  • Đánh giá: 5 ⭐ ( 7670 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách sử dụng lề, phần đệm và đường viền CSS bằng cách đặt chúng thành 0 theo mặc định để hiển thị trên nhiều trình duyệt nhất quán cho một trang web.

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

  • Tác giả: galaxyz.net
  • Đánh giá: 5 ⭐ ( 4228 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

CSS Vùng Đệm

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 7510 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vùng Đệm CSS (Padding)
    --------------
    Các thuộc tính `padding` CSS được sử dụng để tạo vùng đệm giữa đường viền và nội dung của phần tử

    Với CSS, bạn có toàn quyền kiểm soát vùng đệm. Có nhiều thuộc tính để thiết lập `...

[Tự học CSS] Tìm hiểu CSS Forms trong CSS dễ hiểu nhất

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 1919 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cafedev chia sẻ cho ace về hiểu CSS Forms trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hợp nhất danh sách (8 cách) • dữ liệu - cách hợp nhất hai danh sách trong python

By ads_php