Thí dụ. Bạn có tiêu đề h1 nhiều dòng với chiều cao dòng nhất định, theo sau là khối văn bản nội dung nhiều dòng với chiều cao dòng khác

Làm thế nào để bạn tách cả hai?

Tôi thường loại bỏ lề trên — bởi vì chúng đẩy cấp độ đầu tiên của tiêu đề xuống — và chỉ sử dụng lề dưới để phân tách các tiêu đề

Tất nhiên, khoảng cách ở giữa phụ thuộc vào ứng dụng và sở thích cá nhân, nhưng tôi tự hỏi liệu có lợi ích gì khi sử dụng lề hoặc chiều cao dòng không. Hoặc trộn cả hai

Top/bottom margins will collapse, so the

's 24px (36px font size × ⅔) margins will rule. The

's half-leading (space) above and below the font blocks computes to 4px ((16 × 1.5 - 16) ÷ 2), and

's to 9px.

Bây giờ chúng ta có thể nhìn vào tất cả các khoảng cách

From the bottom of the first

's font block to to the top of the

's font block is 4px half-leading + 24px margin + 9px half-leading, 37px.

From the bottom of the

's first line font block, to the top of its second line font block is 9px + 9px, 18px.

The

to

spacing is the same as the first

to

spacing, 37px.

Điều đó có mô tả những gì đang xảy ra với bạn không?

chúc mừng,

gary

• Xem tệp. /// [đường dẫn tới Firefox] /res/html. css

Xác nhận. Bạn hoàn toàn đúng, Paul. Tôi đã hành động khá sai lầm như thể chiều cao dòng 150% được áp dụng cho chính h1 chứ không phải giá trị được tính được kế thừa của nó. Tôi cho rằng, từ lâu, tôi đã quyết định rằng các giá trị phần trăm mang lại quá nhiều cơ hội mắc lỗi và ngừng sử dụng chúng.

Tôi muốn chỉ ra cho OP rằng để duy trì tỷ lệ đánh máy được xác định rõ ràng*, cần phải chỉ định chiều cao dòng và lề dọc cho mỗi và mọi cỡ chữ được sử dụng. Ví dụ: đây là thang đo tôi sử dụng cho trang web của mình

 
  font-size: 1.75em;
  line-height: 1.4286;
  margin: .7143em 0 0;
  
  font-size: 1.5em;
  line-height: 1.6667;
  margin: .8133em 0 0;
  
  font-size: 1.25em;
  line-height: 2;
  margin: 1em 0 0;
   
  font-size: 1em;
  line-height: 1.25em;
  margin: 1.25em 0 0;
   
  font-size: .875em;
  line-height: 1.4286em;
  margin: 1.4286em 0 0;
  
  font-size: .75em;
  line-height: 1.667;
  margin: 1.667em 0 0;

Điều này cung cấp cho chiều cao của mỗi dòng văn bản là bội số của chiều cao cơ sở cho văn bản. Các lề khác nhau bảo vệ khoảng cách cho các khối chứa. IOW, nếu cỡ chữ cơ sở là 16px, thì mỗi chiều cao dòng tính bằng 20 hoặc 40px và tất cả các lề trên tính bằng 20px. Điều này làm cho đường cơ sở cho mọi dòng văn bản xếp thành hàng trên các cột và bản thân cột có tỷ lệ thông thường

Khoảng cách và vị trí của văn bản trong CSS được kiểm soát bằng các thuộc tính

It's a wide wide sentence!

0,

It's a wide wide sentence!

1,

It's a wide wide sentence!

2 và

It's a wide wide sentence!

3. Tìm hiểu cách đặt khoảng cách văn bản và vị trí trong các bước sau

Cảm ơn đã viết trong. Tôi đoán đó không phải là chiều cao của dòng chứ không phải là phần đệm/lề. Để hỗ trợ bạn giải quyết vấn đề này, trước tiên chúng tôi cần bạn cung cấp cho chúng tôi URL của bạn. Điều này là để đảm bảo rằng chúng tôi có thể cung cấp cho bạn câu trả lời phù hợp với tình huống của bạn. Khi bạn đã cung cấp cho chúng tôi URL của mình, chúng tôi sẽ sẵn lòng hỗ trợ bạn mọi việc

ngày 5 tháng 12 năm 2016 lúc 1. 04 giờ sáng #1281211

Tiếp thị nhỏ gọn

Người tham gia

cảm ơn vì đã phản hồi nhanh chóng, url là. http. //www. loan-luan. de

chiều cao dòng thay đổi khi tôi chọn một phông chữ khác, nhưng phông chữ này phù hợp nhất với tôi

ngày 5 tháng 12 năm 2016 lúc 1. 16 giờ sáng #1281222

Rupok

Thành viên

Chào bạn,

Có vẻ như bạn đang sử dụng chiều cao dòng và phần đệm với kiểu nội tuyến cho văn bản. Vì vậy, hãy điều chỉnh chúng từ đó. Nếu bạn không thêm bất kỳ line-height nào thì nó sẽ hoạt động bình thường

Chúc mừng

ngày 5 tháng 12 năm 2016 lúc 2. 29 giờ sáng #1281259

Tiếp thị nhỏ gọn

Người tham gia

ok tuyệt vời.
bạn có thể vui lòng cho biết tôi có thể điều chỉnh cái này ở đâu không? .
i couldn’t find anything like this.
cảm ơn

ngày 5 tháng 12 năm 2016 lúc 2. 35 giờ sáng #1281262

Christopher

Người điều hành

Chào bạn,

Vui lòng cập nhật thẻ h2 thành

Mit dieser Übersicht wirst Du Dein Leben massiv vereinfachen und erfolgreich planen – Geniale Aufteilung

Hy vọng nó giúp

ngày 5 tháng 12 năm 2016 lúc 11. 47 giờ sáng #1281864

Tiếp thị nhỏ gọn

Người tham gia

xin chào, thật tuyệt, nó hoạt động rất tốt, nhưng có thể thay đổi nó cho chủ đề lỗ hổng không?

ngày 5 tháng 12 năm 2016 lúc 12. 19 giờ tối #1281903

Joao

Người điều hành

Chào bạn,

Vui lòng thêm vào Giao diện > tùy biến > Tùy chỉnh > CSS

h2,. h2 {
chiều cao dòng. 23px;
lề trên. 0px;
}

Làm tương tự cho h1 h3 h4 h5 h6…và điều chỉnh độ cao của dòng theo ý muốn của bạn

Hy vọng rằng sẽ giúp

Joao

ngày 5 tháng 12 năm 2016 lúc 1. 06 giờ chiều #1281975

Tiếp thị nhỏ gọn

Người tham gia

hoàn hảo
giờ tôi đã hiểu. tôi hơi mới để sửa đổi chủ đề trong css, nhưng nó hoạt động rất tốt. vì vậy tôi cũng có thể điều chỉnh kích thước phông chữ, lề, v.v.
Cảm ơn rất nhiều
Dirk

5 tháng 12, 2016 lúc 3. 13 giờ chiều #1282136

Joao

Người điều hành

Chào bạn,

Vâng, bạn có thể,

Nếu bạn muốn tìm hiểu một vài điều cơ bản về CSS, tôi khuyên bạn nên xem loạt bài có tên Cơ bản về CSS từ DevTips trên youtube, Travis (người điều hành kênh) rất hài hước và là một giáo viên cực kỳ giỏi

Và tất nhiên nếu bạn cần hỗ trợ bất cứ điều gì, chúng tôi luôn ở đây để giúp bạn

Một công cụ hữu ích khác là, trong trường hợp CSS của bạn ngừng hoạt động hoặc có gì đó không ổn, hãy sử dụng trang web có tên CSS Lint để kiểm tra mã cho bạn 🙂

Hy vọng rằng sẽ giúp

Joao

ngày 6 tháng 12 năm 2016 lúc 1. 40 giờ chiều #1283556

Tiếp thị nhỏ gọn

Người tham gia

đây là trợ giúp rất tốt, tôi có thể tìm tệp css bên trong chủ đề ở đâu. Với “Thông tin chi tiết về tốc độ trang”, có rất nhiều css và java

ngày 6 tháng 12 năm 2016 lúc 3. 56 giờ chiều #1283720

Friech

Người điều hành

Chào bạn,

Từ bảng điều khiển quản trị của bạn, vui lòng điều hướng đến Giao diện > Tùy chỉnh, sau đó trên Tùy biến trong bảng Tùy chỉnh, bạn sẽ thấy Chỉnh sửa CSS toàn cầu và Chỉnh sửa JS toàn cầu