So với display: inline
, sự khác biệt chính là display: inline-block
cho phép đặt chiều rộng và chiều cao trên phần tử
Ngoài ra, với display: inline-block
, lề/phần đệm trên và dưới được tôn trọng, nhưng với display: inline
thì không
So với display: block
, điểm khác biệt chính là display: inline-block
không thêm dấu ngắt dòng sau phần tử, vì vậy phần tử này có thể nằm cạnh các phần tử khác
Ví dụ sau đây cho thấy hành vi khác nhau của display: inline
, display: inline-block
và display: block
Ví dụ
nhịp. Một {
trưng bày. nội tuyến;
chiều rộng. 100px;
chiều cao. 100px;
đệm. 5px;
biên giới. 1px màu xanh đặc;
màu nền. màu vàng;
}
nhịp. b{
trưng bày. chặn Nội tuyến;
chiều rộng. 100px;
chiều cao. 100px;
đệm. 5px;
biên giới. 1px màu xanh đặc;
màu nền. màu vàng;
}
nhịp. c {
trưng bày. khối;
bề rộng. 100px;
chiều cao. 100px;
đệm. 5px;
biên giới. 1px màu xanh đặc;
màu nền. màu vàng;
}
Sử dụng khối nội tuyến để tạo liên kết điều hướng
Một cách sử dụng phổ biến cho display: inline-block
là hiển thị các mục trong danh sách theo chiều ngang thay vì theo chiều dọc. Ví dụ sau tạo liên kết điều hướng ngang
Trong bài đăng này, chúng tôi sẽ giới thiệu cách chèn hình ảnh hoặc đồ họa nội tuyến bằng Elementor và một số CSS đơn giản
Kiểm tra video này về cách tạo hoặc tiếp tục đọc bên dưới
Tải xuống Elementor Pro tại đây
* Bài đăng này có thể chứa các liên kết liên kết. Nếu bạn nhấp vào liên kết và mua hàng, tôi sẽ nhận được hoa hồng từ việc bán hàng mà bạn không phải trả thêm phí. Bằng cách đó, bạn đang ủng hộ blog của tôi và cho phép tôi tiếp tục tạo các video và bài đăng như thế này. Tôi chỉ quảng cáo các sản phẩm mà tôi sử dụng, có kinh nghiệm và hỗ trợ, chẳng hạn như Elementor Pro
Giả sử bạn muốn thêm biểu tượng cảm xúc, biểu tượng hoặc bất kỳ hình ảnh nào khác vào văn bản hoặc đoạn văn của mình. Dưới đây là các bước về cách đạt được điều đó
Chèn văn bản của bạn bằng tiện ích soạn thảo văn bản trong Elementor
Đầu tiên, sử dụng tiện ích soạn thảo văn bản và chèn văn bản của bạn. Chuyển sang tab ‘Văn bản’ của tiện ích và sử dụng CSS để chèn và chỉ định nguồn của hình ảnh. Hình ảnh này có thể được lưu trữ ở bất kỳ đâu trên trang web của bạn hoặc sử dụng bất kỳ liên kết trực tuyến nào khác. Bây giờ bạn cần tạo kiểu cho hình ảnh này và chỉ định kích thước, vị trí và thuộc tính chính xác
Tạo kiểu cho hình ảnh được liên kết của bạn trong tab 'văn bản'
Nhập 'kiểu' nơi bạn có thể thêm tất cả các thuộc tính. chiều rộng, 'vị trí. họ hàng' và chỉ định vị trí này bằng cách sử dụng thuộc tính 'top' chẳng hạn để căn chỉnh hình ảnh với văn bản đúng cách. Sau đó, sử dụng một số lề ở bên trái và bên phải nếu cần. Chơi với các giá trị này để cung cấp cho nó các tham số chính xác và làm cho nó đẹp
Mã cuối cùng có thể trông giống như thế này
I want my image to appear in this text.
6 phông chữ serif thanh lịch, hiện đại, độc đáo nhất
Làm thế nào để tạo cho thiết kế của bạn cảm giác tinh tế, sang trọng và đắt tiền?
Hiệu ứng chữ 3D ánh kim cực ngầu – Hướng dẫn Photoshop
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo hiệu ứng chữ 3D kim loại thú vị này trong Photoshop. Nó cung cấp cho văn bản của bạn một cái nhìn điện ảnh,
Tiêu đề tab ngang trên thiết bị di động trong CSS và Elementor
Trong hướng dẫn này, bạn sẽ học cách tạo tiêu đề tab ngang trên thiết bị di động và đặt chúng ở đầu phần tab của bạn bằng cách sử dụng
Hiệu ứng văn bản nổi bật tùy chỉnh trong CSS và Elementor
Trong hướng dẫn này, bạn sẽ tìm hiểu hai cách đơn giản để tạo hiệu ứng văn bản nổi bật tùy chỉnh trong CSS và Elementor. Bạn có thể tìm thấy cái này
Tạo bài đăng với các màu nền tùy chỉnh, khác nhau trong Elementor PRO và Trường tùy chỉnh nâng cao
Bài đăng này sẽ hướng dẫn bạn cách tạo bài đăng với các màu nền tùy chỉnh, khác nhau bằng plugin Elementor PRO và Advanced Custom Fields. Bằng cách này, mỗi
Nghiên cứu điển hình UX ứng dụng Galo
Thiết kế UX của dự án cho một ứng dụng cho phép người dùng tạo cơ sở dữ liệu mã giảm giá tùy chỉnh của họ. Người dùng nhận được các mã khuyến mãi này thông qua