Question

我试图找出如何在网格上使用img div。这个网格的背景图片包含一个边框，当我尝试检查元素元素时，img divs从绝对的左上角开始，而不是略微远离实际的棋盘图案图像，周围有一个厚边框（950 * 500 - 18列宽9行）。有谁知道如何解决这个问题？

CSS

body
{
    background: #000000 url('gfx/bg.png') 0 0 no-repeat;
    position: absolute;
    width: 1280px; height:720px;
    margin: 0; padding: 0;
    overflow: hidden;
    font-family: tivo-normal;
    text-align: center;
    color: #FFFFFF;
}




#GameGrid
{
    position: absolute;
    /*width: 806px; height: 496px; top: 120px; left: 92px;*/
    width: 950px; 
    height: 500px;
    top: 50px; 
    left: 92px;
    background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}

#GameGrid > div
{
    /*width: 62px; height: 62px;*/
    width: 52px; height: 52px;
    margin: 0;
    float: left;
}

#GameGrid > div > img
{
    /*width: 62px; height: 62px;*/
    width: 52px; height: 52px;
    margin: 0;
}

Answer 1

如果我按照给出的值计算：每列52px的18列，使其成为936px，GameGrid为950px。所以我假设14px被边界占据，即每边7px

所以，你可以在GameGrid中添加一个填充

{
    position: absolute;
    /*width: 806px; height: 496px; top: 120px; left: 92px;*/
    width: 950px; 
    height: 500px;
    top: 50px; 
    left: 92px;
    background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
    padding:7px;
}

如果特别需要，请设置特定的顶部，右侧，底部，左侧填充。

Answer 2

你可以添加cellpading =＆＃34; 0＆＃34;属性到您的标记。您还可以添加CSS规则以防止填充，例如：

#GameGrid td, #GameGrid th{
  padding:0px;
  position:relative;
}

并且可能添加top：0px;到你的#GameGrid＆gt; div> IMG。一个例子可以帮助我们更好地理解你的问题： - ）

Answer 3

求助于修改图像文件并删除网格周围的边框。使用仅网格边框的图像创建另一个div并将其与网格div对齐。

CSS背景图像与img divs

3 个答案: