html 边框

作者：平凡中的不凡发布日期:2026-03-16 浏览:22

<!DOCTYPE html>
<html>
<head>
    <title>HTML 边框示例</title>
    <style>
        /* 定义一个带有边框的 div 元素 */
        .bordered-box {
            border: 2px solid black; /* 设置边框宽度、样式和颜色 */
            padding: 20px; /* 内边距，使内容与边框之间有空间 */
            width: 300px; /* 设置宽度 */
            margin: 20px auto; /* 水平居中 */
            text-align: center; /* 文本居中 */
        }
    </style>
</head>
<body>

<div class="bordered-box">
    这是一个带有边框的盒子。
</div>

</body>
</html>

解释说明：

border: 2px solid black;：设置边框的宽度为2像素，样式为实线，颜色为黑色。
padding: 20px;：设置内边距为20像素，使内容与边框之间有一定的间距。
width: 300px;：设置盒子的宽度为300像素。
margin: 20px auto;：设置上下外边距为20像素，并且左右外边距为自动，使盒子水平居中。
text-align: center;：使文本在盒子内居中显示。

这个示例展示了如何使用HTML和CSS来创建一个带有边框的简单盒子。

上一篇：pdfbox html转pdf代码

下一篇：html 行间距