css中如何让紧挨着的盒子边框像素一样

最新推荐文章于 2025-03-22 19:28:51 发布

I am the sun?

最新推荐文章于 2025-03-22 19:28:51 发布

阅读量664

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/fighting_dream/article/details/113500267

版权

CSS 专栏收录该内容

21 篇文章

订阅专栏

在制作紧挨盒子的时候，你是否也遇到过这样的情况？
在这里插入图片描述
这中间重叠的边框，根本不是我想要的效果呀~
那应该怎么办呢，此时我们可以利用margin负值试试看。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            width: 200px;
            height: 300px;
            border: 2px solid pink;
            list-style: none;
            float: left;
            /* 因为边框大小为2px,所以此时每个右边框向左移动2px，就会让前一个的右边框和后一个的左边框出现重叠的效果，而不是拼合 */
            margin-right: -2px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>