Căn chỉnh nhãn CSS

Vào một thời điểm nào đó trong quá khứ, bạn đã được cung cấp một mô hình thiết kế để thực hiện. Nhà thiết kế đã sử dụng một phông chữ mới thú vị và nó trông thật hoàn hảo trong thiết kế. Khi bạn nhập nó và sử dụng nó trong CSS, bạn sẽ thấy khoảng cách bổ sung xung quanh phông chữ. Đó là gì?

Chà, vấn đề này liên quan đến chính phông chữ. Mỗi phông chữ có chiều cao dòng khác nhau và đi kèm với khoảng cách khác nhau ở trên và dưới văn bản

Giới thiệu

Mỗi phông chữ có một thứ gọi là hàng đầu có nghĩa là khoảng cách giữa các dòng văn bản. Trong CSS, nó là line-height

Trong hình trên, khoảng cách giữa đường cơ sở của dòng thứ hai và dòng đầu tiên là hàng đầu. Trong CSS, điều này được thực hiện bằng cách thêm khoảng trắng bên trên và bên dưới mỗi dòng và nó được gọi là Nửa đầu

Mỗi phông chữ có chiều cao dòng mặc định và sau đó tác giả cũng có thể thêm một line-height lớn hơn trong CSS nếu cần. Điều này có thể gây ra các vấn đề về khoảng cách trong một số phông chữ

Xét hình sau

Các không gian là hoàn hảo và được đo lường tốt trong công cụ thiết kế. Khi nhà phát triển triển khai điều này trong CSS, mọi thứ sẽ bắt đầu không nhất quán

Hiện tại, không có cách khắc phục điều này trừ khi bạn muốn sử dụng các giá trị giãn cách trên và dưới khác nhau (e. g. đệm hoặc lề), nhưng điều đó sẽ không hoạt động đối với tất cả các phông chữ và đó là một quá trình sẽ mất quá nhiều thời gian

Có hy vọng rằng một thuộc tính mới có tên là leading-trim sẽ khắc phục điều đó, nhưng nó không được hỗ trợ trên bất kỳ trình duyệt nào tại thời điểm viết bài này. Bạn có thể đọc thêm về nó ở đây

Bản sửa lỗi kỳ diệu

Là một phần của sự tò mò hàng ngày của tôi, tôi đã kiểm tra trang Messenger của Facebook và nhận thấy một điều thú vị. Nút chính có phần tử giả với chiều rộng bằng 0 và chiều cao là 20px

Hãy để tôi trình bày vấn đề đầu tiên

Một phông chữ có khoảng cách nhất quán được sử dụng. Trong hình dưới đây, vùng màu xám biểu thị chiều cao của phông chữ mà không có bất kỳ phần đệm nào

Khi chúng tôi thêm phần đệm, nó sẽ trông tệ hơn. Xem hình sau

Để khắc phục điều đó, chúng ta cần thêm một phần tử giả bên cạnh TextNode của nút. Đây là HTML

<a href="/sign-in" class="button">Sign in</a>

Văn bản “Đăng nhập” được coi là một nút văn bản và khi một phần tử giả được đặt bên cạnh nó, chúng ta có thể sử dụng vertical-align: middle để căn giữa cả hai

.button:before {
	content: "";
	display: inline-block;
	height: 16px;
	vertical-align: middle;
}

Nó hoạt động. Nhược điểm duy nhất là chúng ta cần đặt chiều cao cẩn thận để có kết quả tốt. Với tất cả những điều đó, đó là một giải pháp tốt hơn nhiều so với việc đặt phần đệm theo cách thủ công như sau

.button {
	padding: 11px 8px 18px 8px;
}

Bạn đã chạy qua một vấn đề tương tự?

Làm cách nào để định vị các phần tử pixel theo pixel như các phần tử khối cho phép sử dụng lề và phần đệm? . khối"?

đường cơ sở
Tất cả các mục linh hoạt được căn chỉnh sao cho chúng thẳng hàng. Mục có khoảng cách lớn nhất giữa cạnh lề bắt đầu chéo của nó và đường cơ sở của nó được làm phẳng với cạnh bắt đầu chéo của dòng

1. Đó có phải là một thực hành tốt để đặt màn hình. flex trên tất cả các div trong một quy tắc CSS?

Lý do tại sao điều này xảy ra?

Có thể do bạn chưa đóng thẻ div đúng cách

Bạn có cái này ở một số nơi

________số 8_______

nó nên được

</div>

Trước khi đặt câu hỏi, vui lòng chạy html và css của bạn thông qua trình xác thực để nhận lỗi chính tả như thế này và cũng để giúp bạn tìm hiểu cách gỡ lỗi

Làm cách nào để định vị các phần tử pixel theo pixel như các phần tử khối cho phép sử dụng lề và phần đệm? . khối"?

Bạn thực sự cần phải tìm hiểu trên màn hình khác nhau. thuộc tính và ý nghĩa của chúng vì câu hỏi bạn đang hỏi không liên quan trực tiếp đến display nhưng display sẽ ảnh hưởng đến cách các phần tử được di chuyển theo vị trí/lề, v.v. Tất cả các loại màn hình khác nhau đều có quy tắc đi kèm và cách bạn di chuyển chúng sẽ tùy thuộc vào loại màn hình đang được sử dụng

Nói chung, bạn có thể di chuyển mọi thứ bằng lề trong khi vẫn duy trì dòng chảy của tài liệu nhưng lề dọc không áp dụng cho một số kiểu hiển thị như ô nội tuyến hoặc ô bảng và việc đặt một thành phần thành khối có thể thay đổi bố cục

Nói chung nếu bạn bắt đầu làm mọi thứ đúng cách thì chúng sẽ căn chỉnh chính xác mà không gặp quá nhiều khó khăn

Đó có phải là một thực hành tốt để đặt màn hình. flex trên tất cả các div trong một quy tắc CSS?

Không, bạn chỉ áp dụng nó khi bạn cần vì flex là một hệ thống bố cục hoàn chỉnh. Bạn không thể ném nó vào mọi thứ,

Hay tốt hơn là chỉ đặt nó trong các tên lớp cụ thể để chỉ được sử dụng khi cần flex?

Tốt hơn hết là sử dụng một lớp được thêm vào phần tử bạn muốn tạo kiểu thay vì chỉ áp dụng cho một bộ chọn phần tử. e. thay vì sử dụng div{}. myclass{}, v.v.

câu cuối ko hiểu. Với "sự tuôn ra"

Điều đó về cơ bản có nghĩa là nó được đặt ngang với đường cơ sở (tuôn ra với nó)

Định nghĩa này khó hiểu quá

Thông số kỹ thuật khô khan và ngắn gọn và bạn cần nắm vững css để tận dụng tối đa chúng. Đôi khi không thể đơn giản hóa một hành vi phức tạp vì các động lực liên quan. Đôi khi, ngay cả những khái niệm đơn giản nhất cũng liên quan nhiều hơn bạn nghĩ. Đó là lý do tại sao điều quan trọng là phải kiểm soát quá trình học tập để mọi thứ theo thứ tự và dần dần mọi thứ trở nên rõ ràng hơn.

Tôi đã nghĩ rằng tôi muốn tự chỉ định các pixel để nó trông đẹp hơn

Một bước đi tồi vì bạn không thực sự hiểu đúng về mối quan hệ và mặc dù nó có vẻ hoạt động nhưng nó không thể quản lý được hoặc nhất quán trên nhiều trình duyệt. Hãy nhớ rằng các thành phần biểu mẫu (nếu chúng ta vẫn đang nói về hộp kiểm) là các trình duyệt chéo hoàn toàn khác nhau, vì vậy, việc áp dụng lề 2px cho thành phần nhãn sẽ không mang lại cho bạn kết quả nhất quán

Bạn cần đưa ra một ví dụ về những gì bạn đang làm dưới dạng các đường ví dụ linh hoạt hoàn hảo đến trung tâm hoặc đường cơ sở. Có thể bạn không hiểu thuật ngữ đường cơ sở hoặc có lẽ bạn đang tìm kiếm một số căn chỉnh tùy chỉnh không phải là vị trí mặc định

Bạn có thể di chuyển mọi thứ nếu bạn nghĩ rằng chúng trông đẹp hơn nhưng nhìn chung, bạn không muốn chiến đấu với các pixel ở mọi cơ hội vì điều đó là vô ích

Bạn phải nhớ rằng các điều khiển biểu mẫu được tạo kiểu hoàn toàn khác nhau giữa các trình duyệt, vì vậy nếu bạn đang thay đổi căn chỉnh của chúng theo px hoặc 2 thì nó sẽ không giống nhau trong trình duyệt khác

Đôi khi, bạn có thể không có lựa chọn nào khác ngoài việc di chuyển phần tử theo cách thủ công nhưng việc áp dụng lề có thể thay đổi cách căn chỉnh nhiều hơn bạn nghĩ vì nó trở thành một phần của hộp đang được căn chỉnh