Question

所以我试图再次进入html / css，并且遇到了border属性的一些问题。如果div ONE的边界为1，则填充在div TWO中行为异常。这可以通过在TWO而不是填充上使用边距来“修复”。如果ONE上没有边框，则TWO的边距会随之下降。使用填充而不是边距修复了这个问题，然而，它没有意义。任何人对边界和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;
    }

Answer 1

边界通常在外面。您可以在css中使用box-sizing:border-box;来表现。另见：Placing border inside of div and not on its edge

边境制造div的行为不端

1 个答案: