可以实现下列效果：

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <title>padding为负值的测试</title>
    4.   <style>
    5.     ul li{
    6.       border: 1px red solid;
    7.       width: 300px;
    8.       height: 400px;
    9.       background-color:     #ADD8E6;
    10.       list-style: none;
    11.       display: inline-block;
    12.       float: left;
    13.       margin: 20px 0 20px -1px;
    14.     }
    15.   </style>
    16. </head>
    17. <body>
    18.   <ul>
    19.     <li>1</li>
    20.     <li>2</li>
    21.     <li>3</li>
    22.     <li>4</li>
    23.     <li>5</li>
    24.     <li>6</li>
    25.     <li>7</li>
    26.     <li>8</li>
    27.   </ul>
    28. </body>

    image.png
    中间的边框之所以没有变粗，就是因为加了外边距为负值，让其向左走。
    注意：

    • 现在只发现 **li** 可以这样将padding变为负值， div 上使用并不会生效。