Đệm là gì? Phần đệm, lề và đường viền - chúng tôi đặt phần đệm bên trong và bên ngoài trong CSS, cũng như các khung cho tất cả các cạnh (trên, dưới, trái, phải)

  • Hướng dẫn

Mục đích của bài viết này không phải là làm phức tạp những điều đơn giản mà là tập trung sự chú ý vào các tiêu chuẩn nổi tiếng mà bằng cách nào đó đã bị lãng quên. Điều quan trọng là duy trì cấu trúc có ý nghĩa trong tất cả các khía cạnh của bố cục và điều quan trọng không kém là tuân thủ cấu trúc đó trong phần thụt lề của bạn. Và một trong những nguyên tắc chính của bố cục là tính linh hoạt. Cụ thể là khả năng dễ dàng thực hiện bất kỳ thay đổi nào mà không vi phạm bất cứ điều gì. Xử lý đúng cách với lề và phần đệm đóng một vai trò rất lớn trong vấn đề này.

Các nguyên tắc sau đây được triển khai trong môi trường của các thành phần định vị trên trang. Chúng cũng được sử dụng trong các yếu tố trang trí. Nhưng không quá phân loại.

Nguyên tắc cơ bản:

  1. Việc thụt lề được trao cho phần tử cuối cùng có thể có trong ngôi nhà.
  2. Không thể đặt thụt lề cho các phần tử độc lập (khối BEM).
  3. Đối với phần tử cuối cùng của nhóm, thụt lề được đặt lại về 0 (luôn luôn).

Thụt lề đi từ phần tử trước đến phần tử tiếp theo.

(các) lề được đặt từ phần tử trước sang phần tử tiếp theo, từ phần tử thứ nhất đến phần tử thứ hai, từ trên xuống dưới, từ trái sang phải.

Điều này có nghĩa là các thuộc tính như lề trái và lề trên không được sử dụng(không phải không có ngoại lệ). Với phần đệm, mọi thứ hơi ngược lại một chút (ngoại trừ việc nó được sử dụng cho mục đích trang trí, tăng diện tích liên kết, v.v.). Khi một khối cần phần đệm ở trên cùng hoặc bên trái, nó sẽ lấy nó từ phần đệm trên cùng và phần đệm bên trái của khối cha.

Các vết lõm đi theo hướng dòng chảy của ngôi nhà trên cây, khối không tự đẩy mình.
Ban đầu, anh ta ở một vị trí tĩnh và nhận một số tác động mà người khác phải trả giá.

Phần thụt lề được trao cho phần tử cuối cùng có thể có trong ngôi nhà

(các) lề chỉ được đặt giữa các phần tử liền kề của ngôi nhà trên cây.

Trong ví dụ có 3 danh sách, theo cấu trúc sau:

  • Xa, xa, vượt quá lời nói.
...
...

Không tốn kém phần tử con, và gây thiệt hại cho những cái lân cận, một vết lõm được tạo ra.

Trong trường hợp này, .main-section__item là phần cuối cùng có thể được thụt vào để phân tách các danh sách. Hiệu ứng tương tự có thể đạt được bằng cách thụt lề một div, một danh sách, một dòng hoặc một liên kết, nhưng điều này sẽ không đúng.

Ví dụ này khá đơn giản. Nhưng nếu bạn tưởng tượng một cái lồng lớn hơn nhiều, nơi có ai đó rải rác những vết lõm, khi một số lề bị xẹp xuống. và một số được thêm vào phần đệm.

tiêu đề trong một phần bảy từ


Nếu chúng ta lấy ví dụ về một tiêu đề và bạn cần thụt lề tiêu đề ở trên cùng. thì phần tử cuối cùng sẽ là phần và phần đệm trên cùng được đặt cho nó, (các) lề theo mặc định luôn cần được đặt lại.

nhất lý do đơn giảnđiều đó đáng để gắn bó nguyên tắc này, điều này nhằm giúp bạn dễ dàng tìm thấy thụt lề trong tương lai, cho bạn hoặc cho người sẽ làm việc với bố cục của bạn trong tương lai. Đây là về sự thuận tiện.

Các vấn đề thực sự có thể phát sinh khi bố cục có cấu trúc thụt lề kém được hiển thị động hoặc trùng lặp.

Không thể đặt thụt lề cho các phần tử độc lập (khối BEM)

Không bao giờ thụt lề các phần tử có thể được sử dụng nhiều lần. Ngay cả khi bạn không tuân theo các phương pháp, hãy giữ mọi thứ theo quan điểm. Có giấy gói cho việc này. Bao bọc là tốt. Hoặc các lớp học bổ sung.

Nếu bạn cần thụt lề một khối. Không có thành kiến, điều này được thực hiện bằng cách sử dụng:

  • Kế thừa thông qua phần tử (nếu bạn kéo khối này ra khỏi phần tử sẽ không có vết thụt lề và bạn chỉ cần đặt nó ở một nơi khác).
  • Thêm một lớp (bạn có thể biến một khối thành một phần tử).
  • Wrapper (giống như một khối có vai trò, chỉ có vai trò định vị).
.block__item > .block ( lề-phải: 10px; ) .block.block__item ( lề-phải: 10px; ) .block-wrap > .block ( lề-phải: 10px; )

Phần tử cuối cùng của nhóm có phần thụt lề được đặt lại về 0 (luôn luôn)

Hãy lấy một danh sách và một hình ảnh làm ví dụ.

Cái này menu ngang và logo (vì lý do nào đó lại ở bên phải).

Đối với li cuối cùng, vết lõm được đặt lại về 0. Và việc thụt lề được thực hiện giữa các phần tử liền kề ul và img. Những gì đã được thảo luận trong nguyên tắc thứ hai.

Hãy lấy một ví dụ khác:


Chúng tôi quan tâm đến lề giữa các tin tức được đặt.blog-preview__item ( lề-bottom: 20px; ). Lề cuối cùng được đặt lại về 0 và phần thụt lề dưới cùng được tạo bằng cách đệm blog-preview . Những gì đã được thảo luận trong nguyên tắc thứ hai.

Thường xuyên hơn các lớp giả khác, bạn nên sử dụng:last-child.

Item:not(:last-child) ( lề-bottom: 20px; ) // hoặc // .item ( // các kiểu khác // lề-bottom: 20px; &:last-child ( lề-bottom: 0; ) ) // hay Margin-top, ý chính ở đây không theo hướng lề mà ở chỗ không thừa // .item + .item (margin-top: 20px; ) // hoặc // .item ( / / các kiểu khác // & + & ( lề-top: 20px; ) )

Ngoại lệ


Tất nhiên, có những trường hợp đặc biệt, những nhiệm vụ không hề nhỏ và những sắc thái không thể tuân thủ những nguyên tắc này, nhưng nếu không thì bạn nên cố gắng tạo ra những vết lõm lý tưởng để làm cho bố cục gọn gàng nhất có thể.

tái bút Tôi khuyên bạn nên đọc ấn phẩm

Bài viết Ghi chú CNTT HTML&CSS Chúng ta hãy nhớ mãi: sự khác biệt giữa lề và phần đệm là gì
Trong khi lang thang khắp các diễn đàn, tôi nhận ra rằng câu hỏi vẫn được đặt ra là, điều gì làm phần đệm, Vậy thì sao lề, và sự khác biệt giữa chúng là gì. Đó là lý do tại sao tôi quyết định nhắc nhở bạn về điều này. Vì vậy, mà không cần dùng đến cụm từ trừu tượng Hãy đặt vấn đề và xem một ví dụ trong đó mọi thứ sẽ trở nên rõ ràng.
Nhiệm vụ: Trên trang Tôi cần một khối màu đỏ(200x200 pixel), trong đó rút lui khỏi các cạnh của trình duyệt trên cùng và bên trái lần lượt là 40 và 70 pixel, và văn bản bên trong được thụt vào bên trái và trên cùng bằng 40 pixel.
Giải pháp: nhìn vào hình ảnh và mã. Khối màu đỏ của chúng tôi không được vượt quá 200 x 200 pixel và phải được thụt vào từ các cạnh của trình duyệt (hoặc các khối nội dung khác). Trên thực tế, chúng tôi thực hiện những vết lõm này thông qua lề. Nếu chúng ta thực hiện đệm, thì vết lõm sẽ xảy ra bên trong khối màu đỏ của chúng ta và vết lõm sẽ thu được với nền của chính khối đó (nghĩa là màu đỏ).

200?"200px:"+(this.scrollHeight+5)+"px");">


văn bản, văn bản, rất nhiều văn bản, rất nhiều văn bản văn bản


Ngoài các thuộc tính được sử dụng (dòng 6-9), còn có các thuộc tính lề phải, đệm phải, lề dưới, đệm dưới cùng - chúng tương ứng để thụt lề ở bên phải và dưới cùng. Giá trị cho tất cả các thuộc tính này có thể tính bằng pixel (px), phần trăm (%) hoặc đơn vị em.
Về nguyên tắc thì chỉ vậy thôi. Tuy nhiên, vẫn có một số tính năng khi làm việc với chúng.

Các tính năng của lề và phần đệm

  • Nếu các khối có CSS tài sản nổi, thì bạn cần đặt display:inline cho các khối sao cho không có lề kép ở bên trái và bên phải (để biết thêm chi tiết, xem bài viết Làm thế nào để kết bạn với Internet Explorer 6 và thuộc tính lề CSS?)
  • Khi sử dụng phần đệm, kích thước của phần đệm phải được trừ khỏi chiều cao và chiều rộng của khối, nếu không kích thước của khối sẽ tăng theo kích thước của phần đệm.
  • Nếu một khối được gán giá trị lề trái và lề phải là auto, thì nếu khối có chiều rộng cố định (ví dụ: 400px) và không có thuộc tính CSS float thì khối này sẽ được căn chỉnh vào giữa của phần tử mà nó nằm trong đó. Trên thực tế, đối với bố cục phi cao su có căn giữa, phương pháp căn chỉnh này thường được sử dụng. Mặc dù thực tế là IE 5.5 trở về trước không hỗ trợ giá trị tự động, nhưng điều này vẫn không ngăn cản bạn sử dụng nó mọi lúc =).
  • Không nên sử dụng phần đệm và lề trong bảng vì hiệu quả sẽ khó lường trong các trình duyệt khác nhau.
    Và điều cuối cùng tôi muốn nói. Đừng quên sử dụng cấu trúc ký hiệu tốc ký, chẳng hạn như lề: 10px 0 5px 20px;. Nếu mức thụt lề bằng 0, thì bạn có thể chỉ cần đặt số 0 mà không cần chỉ định các tham số. Rất dễ nhớ tham số nào liên quan đến đường viền nào - đối với một khối, thụt lề theo chiều kim đồng hồ: số đầu tiên ở trên, số thứ hai ở bên phải, số thứ ba ở dưới cùng, số thứ tư ở trên bên trái.
    Đó thực sự là tất cả những gì tôi muốn nói với bạn ngày hôm nay. Chúc mừng tất cả mọi người cuối tuần!
    +

    Trong chủ đề này, bạn có thể đặt câu hỏi về tài liệu.

  • Sự miêu tả

    Đặt lượng khoảng đệm từ mỗi cạnh của phần tử. Lề là khoảng cách từ đường viền của phần tử hiện tại đến đường viền bên trong của phần tử cha của nó (Hình 1).

    Cơm. 1. Thụt lề từ cạnh trái của phần tử

    Nếu phần tử không có phần tử cha, phần đệm sẽ là khoảng cách từ cạnh của phần tử đến cạnh của cửa sổ trình duyệt, có tính đến việc bản thân cửa sổ cũng có phần đệm được đặt theo mặc định. Để loại bỏ chúng, bạn nên đặt giá trị lề cho bộ chọn bằng không.

    thuộc tính ký quỹ cho phép bạn đặt mức thụt lề cho tất cả các cạnh của một phần tử cùng một lúc hoặc chỉ xác định nó cho các cạnh được chỉ định.

    Cú pháp

    lề: [giá trị | quan tâm | tự động] (1,4) | thừa kế

    Giá trị

    Bạn có thể sử dụng một, hai, ba hoặc bốn giá trị, cách nhau bằng dấu cách. Hiệu ứng phụ thuộc vào số lượng giá trị và được hiển thị trong bảng. 1.

    Lượng thụt lề có thể được chỉ định bằng pixel (px), phần trăm (%) hoặc các giá trị được chấp nhận khác. Đơn vị CSS. Giá trị có thể là số dương hoặc số âm.

    Tự động Chỉ định rằng kích thước thụt lề sẽ được trình duyệt tự động tính toán. kế thừa Kế thừa giá trị của cha mẹ.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    lề

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Với sự khôn ngoan tối thiểu mà bạn có thể thực hiện được, bài tập này sẽ giúp bạn không bị lobortis lobortis và không có đủ tiền để giao dịch sau đó.

    Kết quả ví dụ này thể hiện trong hình. 2.

    Cơm. 2. Áp dụng thuộc tính ký quỹ

    Mô hình đối tượng

    document.getElementById("elementID").style.margin

    Trình duyệt

    trình duyệt web IE 6 ở chế độ tương thích (chế độ quirk) không hỗ trợ căn giữa khối bằng quy tắc tự động lề: 0. Ngoài ra còn có một lỗi trong trình duyệt này với việc nhân đôi giá trị đệm bên trái hoặc bên phải cho các phần tử nổi được lồng trong các phần tử cha. Biên độ liền kề với phía cha mẹ được nhân đôi. Vấn đề thường được giải quyết bằng cách thêm display: inline vào phần tử nổi.

    Các phiên bản Internet Explorer lên đến 7.0 không hỗ trợ giá trị kế thừa.

    Ghi chú

    bạn khối phần tử nằm cạnh nhau theo chiều dọc, hiệu ứng thu gọn được quan sát thấy khi các vết lõm không được tổng hợp mà kết hợp với nhau. Bản thân sự thu gọn hoạt động trên hai hoặc nhiều khối (một khối có thể được lồng bên trong một khối khác) với các vết lõm ở trên cùng hoặc dưới cùng, trong khi các vết lõm liền kề được kết hợp thành một. Đối với phần đệm bên trái và bên phải, việc thu gọn không bao giờ được áp dụng.

    Thu gọn không hoạt động:

    • đối với các phần tử có thuộc tính đệm được đặt ở phía thu gọn.
    • đối với các phần tử có ranh giới được xác định ở phía sụp đổ;
    • trên các phần tử có vị trí tuyệt đối, tức là những người có vị trí được đặt thành tuyệt đối ;
    • trên các phần tử nổi (trong đó thuộc tính float được đặt thành left hoặc right );
    • phần tử nội tuyến;
    • Vì .

    Xin chào các độc giả thân mến của trang blog. Hôm nay tôi muốn tiếp tục chủ đề nghiên cứu và xem xét các quy tắc kiểu dáng cho phép bạn đặt thụt lề và đường viền cho phần tử HTML: đường viền, lề và phần đệm.

    Trước đó chúng tôi đã học được khá nhiều tính chất đơn giản thao tác phông chữ(), văn bản() và xem mô hình

    Có, chúng tôi cũng đã cố gắng xem xét chi tiết các nguyên tắc sử dụng (mở rộng qua một số bài viết). Bây giờ là lúc chuyển sang các quy tắc tạo cơ sở cho việc xây dựng tài liệu (trang web) và chúng ta sẽ bắt đầu với mô hình khối (mối quan hệ của các phần tử Html).

    TRONG phác thảo chung Tôi đã viết về những cái hiện đại, nhưng hôm nay chúng ta sẽ đi vào chi tiết cụ thể. Nếu bạn muốn xem qua ấn phẩm trước đây về chủ đề này, thì bạn được chào đón.

    Mô hình hộp trong CSS - phần đệm, lề và đường viền

    Thứ ba, tiền lãi có thể được sử dụng. Chúng được tính từ đâu? Hoá ra là thế từ chiều rộng container(nghĩa là từ vùng nội dung của phần tử cha). Hơn nữa, điều này không chỉ áp dụng cho lề phải và trái, điều này hợp lý mà còn áp dụng cho lề trên và dưới, tỷ lệ phần trăm sẽ được tính chính xác từ chiều rộng (chứ không phải chiều cao) của vùng chứa.

    Cần lưu ý, khi nói về việc thiết lập các giá trị thứ nguyên, Margin cũng có thể tiêu cực. Những thứ kia. khi chỉ định giá trị dương cho lề ngoài, chúng tôi di chuyển phần tử liền kề đến khoảng cách đã chỉ định và nếu chúng tôi chỉ định giá trị âm, khối lân cận sẽ chỉ chồng lên khối mà chúng tôi đặt thụt lề âm này. Và điều này được sử dụng rất thường xuyên trong CSS.

    Chà, không cần phải nói rằng có một quy tắc Ký quỹ CSS được tạo sẵn, trong nhiều trường hợp cho phép bạn giảm kích thước mã được sử dụng để đặt lề bên ngoài cần thiết. Thứ tự các giá trị trong đó được quy định chặt chẽ (chúng được viết thông qua ký tự không gian) và phải phù hợp với ví dụ:

    Những thứ kia. việc liệt kê bắt đầu từ đầu và tiếp tục theo chiều kim đồng hồ cho đến khi hoàn thành vòng tròn với vết lõm bên phải (phải). Nó có thể trông giống như thế này:

    Lề:20px 10px 40px 30px;

    Và điều này có nghĩa là trình duyệt phía trên khối của chúng ta phải thụt lề 20 pixel, ở bên phải - 10, bên dưới - 40 và ở bên trái - 30. Tức là. mục này sẽ tương đương với:

    Việc giảm code CSS có thể nhìn thấy bằng mắt thường. Nhưng đây không phải là giới hạn. Việc sử dụng không chỉ bốn mà còn ba, hai và thậm chí chỉ một giá trị trong quy tắc đúc sẵn là hoàn toàn có thể chấp nhận được. Điều này sẽ tiếp tục giúp giảm kích thước mã. Tuy nhiên, chỉ có thể giảm số lượng giá trị trong một số trường hợp nhất định:

    1. Nếu lề bên trái và bên phải giống nhau, ví dụ như sau: lề:20px 30px 40px 30px;

      Cái cuối cùng có thể được bỏ qua:

      Lề:20px 30px 40px;

      Hai mục quy tắc prefab này thực hiện điều tương tự. Do đó, nếu bạn thấy một mục có ba giá trị trong Margin, thì giá trị của giá trị thứ tư (ở bên phải) có thể được nhìn thấy trong giá trị thứ hai (ở bên trái).

      Nếu các vết lõm trên và dưới bằng nhau thì thủ thuật như vậy sẽ không còn hiệu quả nữa, vì về mặt logic, có thể giảm cấu trúc mục nhập của một quy tắc đúc sẵn, chỉ cắt bỏ các giá trị trùng lặp từ cuối của nó(và giá trị của thụt lề dưới cùng sẽ là giá trị thứ hai từ cuối cùng).

    2. Nếu, ngoài sự bằng nhau của các lề ngoài ở bên trái và bên phải, còn có sự bằng nhau về các giá trị của chúng ở trên và dưới: lề:20px 30px 20px 30px;

      hoặc, tương tự (do điểm 1):

      Lề:20px 30px 20px;

      Sau đó, một quy tắc đúc sẵn như vậy có thể được viết chỉ với hai giá trị, loại bỏ giá trị cuối cùng trùng với giá trị đầu tiên:

      Lề:20px 30px; Trong trường hợp này, giá trị đầu tiên mô tả lề ngoài theo chiều dọc và giá trị thứ hai - theo chiều ngang.

    3. Và cuối cùng, nếu tất cả các giá trị trong quy tắc prefab đều giống nhau: lề:20px 20px 20px 20px;

      hoặc, tương tự (do điểm 2):

      Lề:20px 20px;

      Điều đó có thể được sử dụng loại bản ghi viết tắt tối đa(loại bỏ giá trị cuối cùng trùng với điều đầu tiên):

      Lề:20px; Điều này có nghĩa là cùng một lề ở tất cả các phía của phần tử Html của chúng ta.

    Nói về lợi nhuận bên ngoài, điều đáng nói là một sơ đồ như "Thu gọn lề" hay nói cách khác là “sự sụp đổ của lề”. Tóm lại, bản chất của hiện tượng này như sau.

    Nếu chúng ta có hai khối nằm bên dưới nhau (việc thu gọn lề chỉ có thể xảy ra theo chiều dọc) và lề đối diện được đặt cho cả hai khối (ví dụ: phần dưới cùng cho phần tử trên cùng và lề trên cho phần dưới cùng), thì Giá trị cao hơn Margin sẽ hấp thụ ít hơn.

    Ví dụ: nếu khối trên cùng được đặt thành:

    Lề:20px 20px 200px 20px;

    Và đối với cái thấp hơn:

    Lề:100px 20px 20px 20px;

    Khi đó, lề dưới của khối trên (200px) sẽ hấp thụ lề trên của khối dưới (100px và ngay cả khi nó bằng 199px, sẽ không có gì thay đổi) và lề ngoài thu được giữa hai khối này vẫn sẽ bằng 200px. Những thứ kia. chỉ cái lớn hơn mới được tính đến Ký quỹ modulo và nó không cộng theo bất kỳ cách nào với giá trị bộ đếm của phần tử liền kề theo chiều dọc.

    Đây là một tính năng bắt chỉ hoạt động theo chiều dọc và chiều ngang, các kích thước Ký quỹ đối lập sẽ chỉ được thêm vào nhau. Nhưng điều này chỉ áp dụng cho các lề có cùng dấu, còn nếu chúng có dấu khác nhau thì số của chúng sẽ cộng lại và các khối sẽ được phân tách với nhau bằng giá trị kết quả.

    Ví dụ: trong trường hợp này:

    Lề trên:20px 20px -20px 20px; Lề dưới:10px 20px 20px 20px;

    Lề kết quả giữa các khối sẽ là -10px, tức là phần dưới cùng sẽ chồng lên phần tử Html trên cùng 10px.

    Một tính năng khác của việc sử dụng quy tắc Ký quỹ trong CSS là giá trị được chỉ định theo chiều dọc cho các phần tử nội tuyến bị bỏ qua. Bằng cách hỏi:

    Lề:20px;

    Ví dụ: đối với , là phần tử nội tuyến, chúng ta thực sự sẽ chỉ thấy phần đệm ngang và sẽ không có thay đổi nào xảy ra theo chiều dọc.

    Nhìn về phía trước một chút, tôi sẽ nói rằng Phần đệm theo chiều dọc cho thẻ dòng sẽ hoạt động, nhưng phần đệm bên trong tăng lên sẽ không ảnh hưởng đến nó theo bất kỳ cách nào tình hình chung so với các phần tử lân cận khác.

    Trong trường hợp thẻ khối (tiêu đề, đoạn văn), việc tăng Khoảng đệm dọc sẽ di chuyển phần tử này so với các khối liền kề khác.

    Chà, khung (Border), hay đúng hơn là chiều rộng của nó, cũng sẽ không thể di chuyển các khối liền kề khác theo chiều dọc ra khỏi thẻ dòng. Đối với các phần tử nội tuyến, chỉ có thể di chuyển theo một hướng - theo chiều ngang và thế là xong.

    Phần đệm và đường viền - phần đệm và khung bên trong

    Bây giờ chúng ta hãy chuyển sang cài đặt phần đệm bằng quy tắc Khoảng đệm và xem chính xác những giá trị nào nó có thể nhận:

    Như bạn có thể thấy, không có đề cập đến Auto ở đây và quy tắc CSS này không cho phép sử dụng các giá trị âm (chúng chỉ có thể là dương - từ 0 trở lên). Những thứ kia. Không có cách nào để đẩy nội dung ra ngoài khung bằng Padding. Điều tối đa có thể làm là đưa nội dung thật gần khung hình.

    Tỷ lệ phần trăm trong đó được tính theo cách tương tự như trong Margin - liên quan đến chiều rộng của vùng chứa (​​vùng nội dung của phần tử gốc) mà phần tử của chúng ta được bao quanh. Quy tắc đệm tổng hợp trong Cssđược hình thành và tuân theo các quy luật tương tự như đã thảo luận ở trên:

    Phần đệm:20px 10px 40px 30px;

    Trong quy tắc này, bắt đầu từ trên xuống, chúng tôi mô tả cả bốn phía. Nếu bạn cần giảm thứ gì đó trong đó (xuống ba, hai hoặc thậm chí một giá trị), thì bạn sẽ cần sử dụng các nguyên tắc rút gọn được mô tả ở trên cho các thụt lề bên ngoài, điều này sẽ mang lại thành công tương tự cho các thụt lề bên trong.

    Và điều cuối cùng hôm nay tôi muốn xem xét là framework được thiết lập bằng cách sử dụng Ranh giới. Chúng có ba loại tham số:

    1. Độ rộng đường viền - đặt độ dày của đường viền
    2. Màu viền - đặt màu của nó
    3. Kiểu đường viền - loại khung hoặc loại đường mà nó sẽ được vẽ

    Cả ba quy tắc CSS này đều có một bộ giá trị hợp lệ:

    Độ rộng đường cho khung ( Chiều rộng biên giới) có thể được chỉ định bằng cách sử dụng các số trong Em, Ex hoặc Px hoặc bằng chữ:

    1. Đường mỏng - mỏng;
    2. Trung bình - trung bình ( giá trị đã chođược sử dụng theo mặc định);
    3. Dày - dày.
    chiều rộng đường viền: 2px;

    Là một giá trị cho màu khung ( Màu viền), bạn có thể sử dụng các phương thức được chấp nhận để chỉ định chúng ( mã thập lục phân, từ, v.v.):

    Màu viền: đỏ;

    Theo mặc định, nếu màu đường viền không được chỉ định rõ ràng thì màu được sử dụng cho phông chữ bên trong phần tử sẽ được sử dụng.
    CSS Thuộc tính kiểu viền cho phép bạn chỉ định loại khung trong từ:

    1. Không có - không có khung (mặc định)
    2. Chấm - đường được vẽ bằng dấu chấm
    3. Đường đứt nét - đường chấm
    4. Đường nét liền - nét liền
    5. Đường đôi - đường đôi
    6. Groove - khung chán nản
    7. Sườn núi nhô ra
    8. Bắt đầu và bắt đầu - trò chơi bóng tối

    Đương nhiên, vì bất kỳ khối nào cũng có bốn cạnh nên nó có thể được sử dụng làm quy tắc chung, và riêng biệt cho mỗi bên:

    Điều tương tự sẽ áp dụng cho quy tắc biên giới đúc sẵn— nó có thể được chỉ định đồng thời cho cả hai bên (Đường viền) và cho từng bên riêng biệt (Đường viền trên, bên trái, dưới cùng và bên phải). Thứ tự của các giá trị không quan trọng:

    Đường viền:1px màu đỏ đậm;

    Nếu bạn bỏ lỡ điều gì đó, giá trị mặc định sẽ được sử dụng thay thế.

    Chúc bạn may mắn! Trước hẹn sớm gặp lại trên các trang của trang blog

    Bạn có thể xem thêm video bằng cách vào
    ");">

    Bạn có thể quan tâm

    Chiều cao, chiều rộng và tràn - Quy tắc CSSđể mô tả một khu vực nội dung trong bố cục khối
    Vị trí (tuyệt đối, tương đối và cố định) - phương pháp định vị html các phần tử trong CSS (quy tắc trái, phải, trên và dưới) Thiết kế khác nhau cho nội bộ và liện kết ngoại thông qua CSS
    Nổi và xóa trong CSS - công cụ bố cục khối
    Hiển thị (chặn, không có, nội tuyến) trong CSS - đặt loại hiển thị HTML các thành phần trên một trang web

    Ngày 18 tháng 10 năm 2017 lúc 03:36 chiều

    Tổ chức thụt lề trong bố cục (lề/phần đệm)

    • CSS
    • HTML
    • Hướng dẫn

    Mục đích của bài viết này không phải là làm phức tạp những điều đơn giản mà là tập trung sự chú ý vào các tiêu chuẩn nổi tiếng mà bằng cách nào đó đã bị lãng quên. Điều quan trọng là duy trì cấu trúc có ý nghĩa trong tất cả các khía cạnh của bố cục và điều quan trọng không kém là tuân thủ cấu trúc đó trong phần thụt lề của bạn. Và một trong những nguyên tắc chính của bố cục là tính linh hoạt. Cụ thể là khả năng dễ dàng thực hiện bất kỳ thay đổi nào mà không vi phạm bất cứ điều gì. Việc xử lý đúng lề và phần đệm đóng một vai trò rất quan trọng trong vấn đề này.

    Các nguyên tắc sau đây được triển khai trong môi trường của các thành phần định vị trên trang. Chúng cũng được sử dụng trong các yếu tố trang trí. Nhưng không quá phân loại.

    Nguyên tắc cơ bản:

    1. Việc thụt lề được trao cho phần tử cuối cùng có thể có trong ngôi nhà.
    2. Không thể đặt thụt lề cho các phần tử độc lập (khối BEM).
    3. Đối với phần tử cuối cùng của nhóm, thụt lề được đặt lại về 0 (luôn luôn).

    Thụt lề đi từ phần tử trước đến phần tử tiếp theo.

    (các) lề được đặt từ phần tử trước sang phần tử tiếp theo, từ phần tử thứ nhất đến phần tử thứ hai, từ trên xuống dưới, từ trái sang phải.

    Điều này có nghĩa là các thuộc tính như lề trái và lề trên không được sử dụng(không phải không có ngoại lệ). Với phần đệm, mọi thứ hơi ngược lại một chút (ngoại trừ việc nó được sử dụng cho mục đích trang trí, tăng diện tích liên kết, v.v.). Khi một khối cần phần đệm ở trên cùng hoặc bên trái, nó sẽ lấy nó từ phần đệm trên cùng và phần đệm bên trái của khối cha.

    Các vết lõm đi theo hướng dòng chảy của ngôi nhà trên cây, khối không tự đẩy mình.
    Ban đầu, anh ta ở một vị trí tĩnh và nhận một số tác động mà người khác phải trả giá.

    Phần thụt lề được trao cho phần tử cuối cùng có thể có trong ngôi nhà

    (các) lề chỉ được đặt giữa các phần tử liền kề của ngôi nhà trên cây.

    Trong ví dụ có 3 danh sách, theo cấu trúc sau:

    • Xa, xa, vượt quá lời nói.
    ...
    ...

    Việc thụt lề được thực hiện không phải gây thiệt hại cho các phần tử con mà gây thiệt hại cho các phần tử lân cận.

    Trong trường hợp này, .main-section__item là phần cuối cùng có thể được thụt vào để phân tách các danh sách. Hiệu ứng tương tự có thể đạt được bằng cách thụt lề một div, một danh sách, một dòng hoặc một liên kết, nhưng điều này sẽ không đúng.

    Ví dụ này khá đơn giản. Nhưng nếu bạn tưởng tượng một cái lồng lớn hơn nhiều, nơi có ai đó rải rác những vết lõm, khi một số lề bị xẹp xuống. và một số được thêm vào phần đệm.

    tiêu đề trong một phần bảy từ


    Nếu chúng ta lấy ví dụ về một tiêu đề và bạn cần thụt lề tiêu đề ở trên cùng. thì phần tử cuối cùng sẽ là phần và phần đệm trên cùng được đặt cho nó, (các) lề theo mặc định luôn cần được đặt lại.

    Lý do đơn giản nhất khiến bạn nên tuân thủ nguyên tắc này là để giúp bạn dễ dàng tìm thấy vết lõm trong tương lai, cho bạn hoặc cho người sẽ làm việc với bố cục của bạn trong tương lai. Đây là về sự thuận tiện.

    Các vấn đề thực sự có thể phát sinh khi bố cục có cấu trúc thụt lề kém được hiển thị động hoặc trùng lặp.

    Không thể đặt thụt lề cho các phần tử độc lập (khối BEM)

    Không bao giờ thụt lề các phần tử có thể được sử dụng nhiều lần. Ngay cả khi bạn không tuân theo các phương pháp, hãy giữ mọi thứ theo quan điểm. Có giấy gói cho việc này. Bao bọc là tốt. Hoặc các lớp học bổ sung.

    Nếu bạn cần thụt lề một khối. Không có thành kiến, điều này được thực hiện bằng cách sử dụng:

    • Kế thừa thông qua phần tử (nếu bạn kéo khối này ra khỏi phần tử sẽ không có vết thụt lề và bạn chỉ cần đặt nó ở một nơi khác).
    • Thêm một lớp (bạn có thể biến một khối thành một phần tử).
    • Wrapper (giống như một khối có vai trò, chỉ có vai trò định vị).
    .block__item > .block ( lề-phải: 10px; ) .block.block__item ( lề-phải: 10px; ) .block-wrap > .block ( lề-phải: 10px; )

    Phần tử cuối cùng của nhóm có phần thụt lề được đặt lại về 0 (luôn luôn)

    Hãy lấy một danh sách và một hình ảnh làm ví dụ.

    Đây là một menu ngang và logo (vì lý do nào đó lại nằm ở bên phải).

    Đối với li cuối cùng, vết lõm được đặt lại về 0. Và việc thụt lề được thực hiện giữa các phần tử liền kề ul và img. Những gì đã được thảo luận trong nguyên tắc thứ hai.

    Hãy lấy một ví dụ khác:


    Chúng tôi quan tâm đến lề giữa các tin tức được đặt.blog-preview__item ( lề-bottom: 20px; ). Lề cuối cùng được đặt lại về 0 và phần thụt lề dưới cùng được tạo bằng cách đệm blog-preview . Những gì đã được thảo luận trong nguyên tắc thứ hai.

    Thường xuyên hơn các lớp giả khác, bạn nên sử dụng:last-child.

    Item:not(:last-child) ( lề-bottom: 20px; ) // hoặc // .item ( // các kiểu khác // lề-bottom: 20px; &:last-child ( lề-bottom: 0; ) ) // hay Margin-top, ý chính ở đây không theo hướng lề mà ở chỗ không thừa // .item + .item (margin-top: 20px; ) // hoặc // .item ( / / các kiểu khác // & + & ( lề-top: 20px; ) )

    Ngoại lệ


    Tất nhiên có những trường hợp đặc biệt nhiệm vụ không tầm thường và các sắc thái không thể tuân thủ các nguyên tắc này, nhưng mặt khác, đáng để cố gắng tạo ra những vết lõm lý tưởng để làm cho bố cục gọn gàng nhất có thể.

    tái bút Tôi khuyên bạn nên đọc ấn phẩm