-2
パディングがなぜ機能しないのか説明してください。私のパディングは完璧なボックスにする必要がありますが、何らかの理由でそれが長方形の長方形として出てきます。側面の周りの30のパディングは完全な正方形でなければなりません。私は他の李とulのためのより多くの規則を持っていますが、それは私の#navのIDにしかないので、なぜ紛争が起こるのか分かりません。パディングが正しく動作しない、間違った形状を示す
html {
height: 100%;
}
body{
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
margin-top: -130px;
}
#inner{
margin-top: 130px;
width: auto;
}
/*
#wrapper{
margin-left: auto;
margin-right: auto;
border: 1px solid blue;
width: 85%;
background-color: blue;
height: calc(100vh - 130px);
}
*/
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background-color: #862d59;
height: 100px;
box-shadow: 0px 5px 8px grey;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #862d59;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #862d59;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
li.middle{
background-color: #26004d;
padding: 10px 10px 10px 10px;
margin-right: 30px;
margin-top: 200px;
text-align: center;
color: white;
}<div id="wrapper">
\t <div id="inner">
\t \t <ul>
\t \t \t <li class="middle">some stuff</li>
\t \t </ul>
\t </div>
\t </div>
\t <div id="footer">
\t \t <div class="wrap">
\t \t \t <div class="sub"></div>
\t \t \t <div class="sub"></div>
\t \t \t <div class="sub"></div>
\t \t </div>
\t </div>
高さと幅を定義して正方形にすると、パディングはコンテンツの内側から距離を追加します。 – theblindprophet
squascaseを作成するために 'width'と' height'を使用すると、 'padding'は' width'と 'height'で設定された形状にのみ追加されます – warkentien2