Html 将div与边框对齐

Html 将div与边框对齐,html,css,Html,Css,我有3个div,正确的下倾,但一旦我添加边框,它的对齐就会变短或变长 {% load static %} <html> <head> <link rel="stylesheet" href="{% static 'css/css.css' %}"> </head> <body> <div id="block1"> Block1

我有3个div,正确的下倾,但一旦我添加边框,它的对齐就会变短或变长

{% load static %}
<html>
    <head>
        <link rel="stylesheet" href="{% static 'css/css.css' %}">
    </head>

    <body>
        <div id="block1">
            Block1
        </div>
        <div id="block2">
            Block 2
        </div>

        <div id="block3">
            Block 3
        </div>

    </body>
</html>

是否已将块设置为具有
框大小:边框框
?等一下,有人会提到关于使用W3school的一些事情我真的不明白这个问题-这是一把小提琴给那些想试试的人->@Huangism,:-)有一个很好的理由,也许
大纲
就是你想要的。它类似于
边框
,但不占用空间,因此不影响对齐
html, body{
    height: 100%;
    width:100%;
}
#block1{
    height:10%;
    width:46%;
    text-align:center;
    float:left;
    border-style:solid;
    border-color:green;
    border-width:20%;

}

#block2{
    height:90%;
    width:46%;
    float:right;
    border-style:solid;
    border-color:green;
    border-width:2%;
}

#block3{
    height:80%;
    width:50%;
    float: left;

}