塊級(jí)元素獨(dú)占一行並撐滿寬度，適用於全寬按鈕或分節(jié)符；行內(nèi)元素像文字一樣流動(dòng)，適合小段文本或鏈接；行內(nèi)塊元素結(jié)合兩者優(yōu)點(diǎn)，可設(shè)置尺寸且水平排列，常用於導(dǎo)航菜單或佈局排版。具體使用如下：1. 使用block 讓元素獨(dú)占一行並撐滿寬度；2. 使用inline 使元素不打斷文本流；3. 使用inline-block 實(shí)現(xiàn)水平排列並控制大小間距。掌握這三種display 類型能有效解決網(wǎng)頁佈局中的對齊和排列問題。

If you've ever tried to line up elements on a webpage and wondered why some stack vertically while others sit side by side, the answer likely lies in the display property — specifically, whether an element is rendered as block , inline , or inline-block . These values control how elements take up space and interact with each other. Let's break down what each one does and when to use them.

Block Elements Take Up Full Width

By default, block-level elements like <div> or <code><p></p> start on a new line and stretch to fill the entire width available. This means no other element can sit next to them horizontally.

• They respect top and bottom margins and padding.
• Width and height properties work as expected.
• Examples: headings ( <h1></h1> to <h6></h6> ), paragraphs ( <p></p> ), and divs ( <div> ).<p> So if you want something to stand alone on its own line — like a section divider or a full-width button — setting it to <code>display: block makes sense.
  

  ---

  Inline Elements Flow Within Text

  Elements set to display: inline behave more like text characters. They sit within the flow of content and don't force line breaks before or after themselves.

  • You can't set width or height on them.
  • Vertical margins (top and bottom) won't have any effect.
  • Examples: <span></span> , <a></a> , and <strong></strong> .

  This display type works well for small bits of styled text or links inside a paragraph. But if you try to give an inline element a specific size or spacing, it just won't cooperate — that's where inline-block comes in handy.

  

  ---

  Inline-Block Combines Features of Both

  display: inline-block gives you the best of both worlds: the inline flow of text with the layout control of block elements.

  • It flows inline like text, so it can sit next to other inline or inline-block elements.
  • You can set width, height, margins, and padding.
  • Commonly used for horizontal navigation menus or grid-like layouts where items need spacing and sizing control.

  For example, if you're trying to line up a few buttons or menu items side by side and want them all to be 100px wide, inline-block is your go-to choice.

  ---

  In practice, here's how they typically play out:

  • Use block when you want an element to span the full width and sit on its own line.
  • Go with inline for small text-level elements that shouldn't disrupt the flow.
  • Choose inline-block when you need inline behavior but also want to control size and spacing.

  These display types are foundational to layout design in CSS, and knowing when to use each can save you from unnecessary hacks or confusing alignment issues.

  基本上就這些。