css - 边框使 div 行为不端-6ren

css - 边框使 div 行为不端

转载作者：太空宇宙更新时间：2023-11-04 14:22:16

所以我试图再次进入 html/css，并且在 border 属性方面遇到了一些问题。如果 div ONE 的边界为 1，则 padding 在 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;
    }