Không gian ngang HTML

Các thuộc tính CSS padding được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử, bên trong bất kỳ đường viền được xác định nào

Với CSS, bạn có toàn quyền kiểm soát phần đệm. Có các thuộc tính để đặt phần đệm cho mỗi bên của một phần tử (trên, phải, dưới và trái)

---

Đệm - Các mặt riêng lẻ

CSS có các thuộc tính để chỉ định phần đệm cho mỗi bên của phần tử

• padding-top
• padding-right
• padding-bottom
• padding-left

Tất cả các thuộc tính đệm có thể có các giá trị sau

• chiều dài - chỉ định phần đệm theo px, pt, cm, v.v.
• % - chỉ định phần đệm theo % chiều rộng của phần tử chứa
• kế thừa - chỉ định rằng phần đệm phải được kế thừa từ phần tử cha

Ghi chú. Giá trị âm không được phép

Thí dụ

Đặt phần đệm khác nhau cho cả bốn mặt của một

yếu tố.   

div {
đệm-top. 50px;
đệm-phải. 30px;
đệm-đáy. 50px;
đệm-trái. 80px;
}

Tự mình thử »

---

---

Padding - Thuộc tính viết tắt

Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính đệm trong một thuộc tính

Thuộc tính padding là thuộc tính tốc ký cho các thuộc tính đệm riêng lẻ sau

• padding-top
• padding-right
• padding-bottom
• padding-left

Vì vậy, đây là cách nó hoạt động

Nếu thuộc tính padding có bốn giá trị

• đệm. 25px 50px 75px 100px;
  • phần đệm trên cùng là 25px
  • phần đệm bên phải là 50px
  • phần đệm dưới cùng là 75px
  • phần đệm bên trái là 100px

Thí dụ

Sử dụng thuộc tính tốc ký đệm với bốn giá trị

div {
đệm. 25px 50px 75px 100px;
}

Tự mình thử »

Nếu thuộc tính padding có ba giá trị

• đệm. 25px 50px 75px;
  • phần đệm trên cùng là 25px
  • phần đệm bên phải và bên trái là 50px
  • phần đệm dưới cùng là 75px

Thí dụ

Sử dụng thuộc tính tốc ký đệm với ba giá trị.  

div {
đệm. 25px 50px 75px;
}

Tự mình thử »

Nếu thuộc tính padding có hai giá trị

• đệm. 25px 50px;
  • phần đệm trên và dưới là 25px
  • phần đệm bên phải và bên trái là 50px

Thí dụ

Sử dụng thuộc tính tốc ký đệm với hai giá trị.  

div {
đệm. 25px 50px;
}

Tự mình thử »

Nếu thuộc tính padding có một giá trị

• đệm. 25px;
  • cả bốn phần đệm là 25px

---

Phần đệm và chiều rộng phần tử

Thuộc tính CSS padding5 chỉ định độ rộng của vùng nội dung của phần tử. Vùng nội dung là phần bên trong phần đệm, đường viền và lề của một phần tử (mô hình hộp)

Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm được thêm vào phần tử đó sẽ được thêm vào tổng chiều rộng của phần tử. Đây thường là một kết quả không mong muốn

Thí dụ

Ở đây,

phần tử được cho chiều rộng 300px. Tuy nhiên, chiều rộng thực tế của

phần tử sẽ là 350px (300px + 25px của phần đệm bên trái + 25px của phần đệm bên phải)

div {
bề rộng. 300px;
đệm. 25px;
}

Tự mình thử »

Để giữ chiều rộng ở mức 300px, bất kể số lượng phần đệm, bạn có thể sử dụng thuộc tính padding6. Điều này làm cho phần tử duy trì chiều rộng thực tế của nó;

Đôi khi bạn có thể cần thêm khoảng trống vào tài liệu của mình. Thường thì điều này được thực hiện với việc sử dụng các hình ảnh vô hình có thể hoàn toàn trong suốt hoặc có cùng màu với nền. Tuy nhiên, những phương pháp này không đáng tin cậy. Để bao gồm khoảng trống trong tài liệu, bạn có thể sử dụng phần tử. Nó giống như một hình ảnh, nhưng thực ra, không có hình ảnh ở đó

Bạn nên chỉ định là một trong các loại sau. ngang, dọc và khối, có thể là cả ngang và dọc. Để làm điều này, hãy sử dụng thuộc tính type

Bài viết này được đồng tác giả bởi biên tập viên của wikiHow, Nicole Levine, MFA. Nicole Levine là Nhà văn và Biên tập viên Công nghệ cho wikiHow. Cô có hơn 20 năm kinh nghiệm tạo tài liệu kỹ thuật và lãnh đạo các nhóm hỗ trợ tại các công ty phần mềm và lưu trữ web lớn. Nicole cũng có bằng MFA về Viết sáng tạo từ Đại học Bang Portland và dạy sáng tác, viết tiểu thuyết và làm tạp chí tại nhiều học viện khác nhau

wikiHow đánh dấu một bài báo là được người đọc chấp nhận sau khi nhận được đủ phản hồi tích cực. Bài viết này đã nhận được 11 lời chứng thực và 88% độc giả đã bình chọn thấy nó hữu ích, khiến nó trở thành trạng thái được độc giả chấp thuận của chúng tôi

Bài viết này đã được xem 5,917,592 lần

Tìm hiểu thêm

Việc thêm khoảng trống giữa các từ và đoạn văn trong HTML rất khác so với trong các ứng dụng như Microsoft Word. Nhưng đừng vội vò đầu bứt tóc—chúng tôi sẽ chỉ cho bạn những cách dễ dàng nhất để kiểm soát khoảng cách giữa các từ và dòng văn bản, cũng như cách thêm khoảng trống vào đầu mỗi đoạn văn để chúng được thụt lề đúng cách trên . Bài viết wikiHow này hướng dẫn bạn những cách khác nhau để thêm khoảng trắng vào mã HTML của mình

bước

1. Mở mã HTML của bạn trong trình soạn thảo văn bản. Bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào, chẳng hạn như Notepad cho Windows hoặc TextEdit cho macOS, để chỉnh sửa mã của mình. Nếu bạn nhấn phím cách nhiều lần để thêm khoảng trắng giữa các từ hoặc ký tự, thì bạn sẽ không thấy những khoảng trắng thừa đó trên trang web của mình—HTML tự động chuyển đổi nhiều khoảng trắng thành một khoảng trắng. Bạn có thể khắc phục điều này bằng cách sử dụng các ký tự dấu cách không ngắt thay vì nhấn phím cách

2. Nhập   nơi bạn muốn chèn thêm khoảng trắng. Thêm một ký tự khoảng trắng không ngắt cho mỗi khoảng trắng bạn muốn thêm. Không giống như nhấn phím cách nhiều lần trong mã HTML của bạn, việc nhập nhiều hơn một lần sẽ tạo ra nhiều khoảng trắng tùy theo số lần nhập

   • Ví dụ: giả sử bạn muốn có ba khoảng cách giữa các từ "Bạn sẽ học gì" và "hôm nay?" . Đây là một ví dụ

     
     
     wikiHow: How-to instructions you can trust.
     
     
     What will you learn   today?
     
     
     

   Về cơ bản,   chỉ dịch thành "một khoảng trắng" trong HTML

3. Sử dụng các ký tự giãn cách khác làm phím tắt. Nếu bạn muốn chèn hai dấu cách, bốn dấu cách hoặc thụt lề vào đầu dòng, bạn không cần phải nhập nhiều lần

   • hai không gian. Loại
   • bốn gian. Loại

1. Mở mã HTML của bạn. Một cách khác để thêm nhiều khoảng trống vào mã của bạn là sử dụng HTML

    tag. This tag essentially displays the text exactly as you type or paste it, spaces and all. Start by opening your code in a text editor like Notepad for Windows or TextEdit for macOS. 
   
   
   
   

2. Nhập các thẻ

   trong phần nội dung tài liệu của bạn. Bất kỳ văn bản nào bạn muốn giữ ở định dạng sẵn với một lượng khoảng trắng và/hoặc ngắt dòng cụ thể sẽ nằm giữa các thẻ này

   
   
   wikiHow: How-to instructions you can trust.
   
   
     
   

3. Nhập hoặc dán văn bản chính xác như dự định giữa "

   " and ''
   '' tags. In this example, we're creating three spaces between words, as well as a line break. When pre-formatting text, any spaces between words, as well as line breaks you create by pressing "Enter" or "Return," will be displayed on the webpage.
   
   
   
   wikiHow: How-to instructions you can trust.
   
   
   What   will   you   
   learn   today?
   
   

1. Mở mã HTML của bạn trong trình soạn thảo văn bản. Bạn có muốn thêm khoảng trống giữa các đoạn văn hoặc các yếu tố khác trên trang không?
   sẽ. Bắt đầu bằng cách mở mã HTML của trang bạn muốn chỉnh sửa

2. Loại
   trên mỗi dòng bạn muốn để trống. Ví dụ: nếu bạn chỉ muốn chèn thêm một dòng ngang trống giữa hai đoạn văn, bạn chỉ cần nhập một
   Một lần. Nhưng nếu bạn muốn thêm ba lần ngắt dòng, bạn có thể gõ ba lần.
   
   
   .

   • Trong ví dụ này, chúng tôi đang thêm hai dòng khoảng trống giữa các câu của chúng tôi

     
     
     wikiHow: How-to instructions you can trust.
     
     
     What   will   you  
     learn   today?
     
     
     
     Bạn sẽ học được nhiều điêu
     
     
     
     

1. Mở một tài liệu HTML. Giả sử bạn muốn thụt lề đầu đoạn văn bằng một số khoảng trống—giả sử 10 pixel. Cách tốt nhất để làm điều này là sử dụng CSS (Cascading Style Sheets). Chúng tôi sẽ đề cập đến hai cách để thực hiện việc này—một cách cho phép bạn thụt lề từng đoạn theo cách thủ công và cách khác thụt lề tất cả các đoạn cùng một lúc. Bắt đầu bằng cách mở tài liệu HTML của bạn trong trình soạn thảo văn bản

2. Thụt lề một đoạn văn. Nếu chúng ta muốn thụt lề đoạn văn trong ví dụ của mình, chúng ta có thể làm như vậy bằng cách thêm thuộc tính text-indent vào của nó.

   nhãn. Trong ví dụ này, chúng tôi sẽ thụt lề đoạn văn của mình bằng 10px

   
   
   wikiHow: How-to instructions you can trust.
   
   
   Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.
    Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.
   
   
   

   • Vì chúng tôi đã thêm thuộc tính thụt lề văn bản vào đoạn đầu tiên, nên đó là đoạn duy nhất sẽ được thụt vào. Đọc tiếp để tìm hiểu cách thụt lề tất cả các đoạn trên trang theo cùng một cách thay vì chỉ một đoạn

3. Tạo phần kiểu cho CSS của bạn. Nếu chúng tôi muốn thụt lề tất cả các đoạn trên trang của mình, chúng tôi có thể làm như vậy bằng cách xác định kiểu đoạn văn trong CSS. Phần kiểu đi vào phần đầu mã HTML của bạn hoặc trên một biểu định kiểu riêng. Hãy thêm phần của chúng tôi vào phần đầu, nằm giữa các thẻ và

   
   
   wikiHow: How-to instructions you can trust.
   
   
   
   Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.
   Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.
   
   
   

4. Nhập mã thụt lề vào vùng kiểu. Vì vậy, chúng tôi muốn mỗi đoạn bắt đầu với 10px không gian, không chỉ một. Điều này có nghĩa là chúng ta sẽ cần tạo kiểu cho thẻ đoạn văn (

   ) tự động thêm 10px khoảng trống vào đầu từ đầu tiên trong mỗi đoạn. Chúng tôi cũng muốn xóa thuộc tính thụt lề văn bản khỏi ví dụ ban đầu của chúng tôi, vì nó sẽ không còn cần thiết nữa. Tài sản sẽ trông như thế này

   
   
   wikiHow: How-to instructions you can trust.
   
   
   
   Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.
   Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.
   
   
   

   • Bạn có thể điều chỉnh số lượng khoảng cách bằng cách nhập một số khác sau "text-indent. "
   • Bạn có thể sử dụng các đơn vị khác với pixel để xác định kích thước thụt lề của mình, chẳng hạn như tỷ lệ phần trăm (i. e. "thụt lề văn bản. 15%;") hoặc phép đo (e. g. , "thụt lề văn bản. 3mm;")

5. Loại

   ở đầu mỗi đoạn. Vì chúng tôi đã thêm các hướng dẫn cụ thể để thụt lề

   thẻ, mỗi đoạn trên trang sẽ được thụt vào 2. 5 em. Điều này áp dụng cho các đoạn văn hiện có của chúng tôi và bất kỳ đoạn văn mới nào chúng tôi thêm vào trang

Thêm câu hỏi mới

• Nếu tôi xác định các dòng văn bản là các đoạn riêng lẻ, tôi sẽ nhận được khoảng trống giữa các dòng. Làm thế nào để tôi thoát khỏi không gian đó?

  Sử dụng ngắt dòng thay vì ngắt đoạn

• Tôi có thể chỉ định nhiều lớp CSS cho bất kỳ phần tử HTML nào không?

  Vâng, nó cũng rất đơn giản. Bên trong thuộc tính lớp, thêm tất cả các lớp bạn muốn phần tử có, cách nhau bằng khoảng trắng. Ví dụ: nếu bạn có một thẻ cần các lớp "blueFont" và "gạch dưới", thì thuộc tính lớp sẽ là. class="blueFont gạch chân"

• Làm cách nào để tạo không gian mã HTML theo chiều dọc?

  Cơ bản nhất là chỉ cần tạo kiểu cho nó với lề và/hoặc phần đệm. Ngoài ra, hãy đọc phần tử định vị tuyệt đối, sau đó bạn có thể chỉ định chính xác vị trí trên trang bạn muốn, pixel cho pixel

Bao gồm địa chỉ email của bạn để nhận được tin nhắn khi câu hỏi này được trả lời

Gửi đi

• Nếu không gian của bạn biến thành biểu tượng lạ trên trình duyệt web, rất có thể đó là do dữ liệu bổ sung được lưu trữ ở định dạng xử lý văn bản không dành cho hiển thị trực tuyến. Tránh điều này bằng cách sử dụng trình soạn thảo văn bản gốc như Notepad hoặc TextEdit

• CSS là một cách mạnh mẽ và dễ dự đoán hơn nhiều để bố trí trang của bạn, bao gồm cả khoảng cách giữa các văn bản của bạn

Cảm ơn bạn đã gửi một mẹo để xem xét

"Tôi đang tìm cách thêm khoảng trống trước và sau văn bản trong một nút. bài viết này giúp cuộc sống của tôi trở nên dễ dàng, bởi vì   tốt hơn nhiều so với cộng bốn lần. ". "