0

所以我试图再次进入 html/css，并且在边框属性方面遇到了一些问题。如果 div ONE 的边框为 1，则在 div TWO 中填充行为异常。这可以通过在 TWO 上使用边距而不是填充来“修复”。如果 ONE 上没有边框，则 TWO 上的边距将 ONE 向下推。使用填充而不是边距可以解决此问题，但是，它没有意义。有人对使用边框和div有什么智慧的话吗？这里很混乱。

下面的代码用于边距，没有边框。

HTML 代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/tyle.css" />
</head>
<body>
    <div class="ONE">
        <div class="TWO">This is some text as a test.</div>
    </div>
</body>
</html>

CSS 样式：

body {
    background: #e3f1e2;
    margin: 0px;
    padding: 0px;
    font-family: arial;
    font-size: 12px;
    color: #000000;
}

a:link {text-decoration: none; color: #FFFFFF}
a.menu:link {text-decoration: none; color: #FFFFFF}
a:visited {text-decoration: none; color: #FFFFFF}

div.ONE {
    /*border: 1px solid #CCCCCC;*/
    background-image: url("../test.jpg");
    background-repeat: no-repeat;
    text-align: left;
    width: 1024px;
    height: 800px;
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    }
div.TWO {
    margin-top: 80px;
    margin-left: 120px;
    }
4

1 回答 1

1

边界通常在外面。你可以box-sizing:border-box;在你的css中使用来表现。另请参阅：将边框放置在 div 内部而不是其边缘

于 2013-11-07T17:05:39.063 回答