區塊

區塊概念

<aside> 💡

CSS區塊概念可以參考廖建翔老師的書 (11-1)。

</aside>

在CSS裡，多數的HTML元素，如:h1、p、img、table、div都可以視為一個區塊。

CSS Box Model
- Margin
- Border
- Padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box Model Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 15px;
            border: 5px solid blue;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <h1>CSS Box Model Example</h1>
    <div class="box">
        Content inside the box
    </div>
    <p>The box above demonstrates the CSS box model:</p>
    <ul>
        <li><strong>Content:</strong> The text "Content inside the box".</li>
        <li><strong>Padding:</strong> 15px space between the content and the border.</li>
        <li><strong>Border:</strong> 5px solid blue border around the padding.</li>
        <li><strong>Margin:</strong> 20px space outside the border.</li>
    </ul>
</body>
</html>

框線

<aside> 💡

CSS框線屬性可以參考廖建翔老師的書 (11-2)。

</aside>

CSS Borders (Style)

<aside> 📢

如果border-style沒有設定，其他的屬性都會無效，而且瀏覽器不會顯示任何錯誤

</aside>

CSS Border Color
CSS Border Width
CSS Border Sides
CSS Shorthand Border Property
- border-width
- border-style (required)
- border-color
CSS Rounded Borders (Radius)
CSS Rounded Corners (Advanced CSS)
CSS Border Images

    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 15px;
            **border: 5px solid blue;**
            background-color: lightgray;
        }
    </style>