応答性の問題を引き起こすマージン

私は3つのボックスで練習しています。それは私が箱のための余白を持っていないときにしたいことが大好きです。しかし、マージンを追加すると、望ましい結果が得られません。それから私は45％のようなパーセンテージを使用しなければなりません。しかし、マージンを考慮して50％も使用することはできないのですか？応答性の問題を引き起こすマージン

ここに私のコードです。可能であれば、いくつかの説明を非常に感謝します。ボックスのサイズ変更と

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t background-color: lightblue; 
 
} 
 
.container { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
.box { 
 
\t width: 100%; 
 
\t height: 100px; 
 
} 
 
.blue { 
 
\t background-color: orange; 
 
\t width: 100% 
 
} 
 

 
.red { 
 
\t background-color: red; 
 
} 
 
.green { 
 
\t background-color: green; 
 
} 
 

 
@media screen and (min-width: 500px) { 
 
\t .blue { 
 
\t \t width: 50%; 
 
\t } 
 
\t .red { 
 
\t \t width: 50%; 
 
\t } 
 
\t 
 
} 
 

 
@media screen and (min-width: 700px) { 
 
\t .blue { 
 
\t \t width: 33%; 
 
\t } 
 
\t .red { 
 
\t \t width: 33%; 
 
\t } 
 
\t .green { 
 
\t \t width: 33%; 
 
\t } 
 
\t 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Testing</title> 
 
\t <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="box blue"></div> 
 
    <div class="box red"></div> 
 
    <div class="box green"></div> \t 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-06-25 special3220

はい、％を使用して間隔を割り当てることができます。 – frnt

使用パディング、マージンを使用しないでください。は、このHTMLを使用：

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Testing</title> 
     <link rel="stylesheet" type="text/css" href="css/main.css"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="box blue"> 
     <div class="blue-bg"></div> 
     </div> 
     <div class="box red"> 
     <div class="red-bg"></div> 
     </div> 
     <div class="box green"> 
     <div class="green-bg"></div> 
     </div> 
    </div> 
    </body> 
    </html>

とCSS

* { 
    box-sizing: border-box; 
} 

body { 
    background-color: lightblue; 
} 
.container { 
    display: flex; 
    flex-wrap: wrap; 
} 
.box { 
    width: 100%; 
    min-height: 100px; 
    padding: 15px; 
    box-sizing: border-box; 
} 
.box > div{ 
    height:100px; 
} 
.blue { 
    width: 100% 
} 
.blue-bg{ 
    background-color: orange; 
} 

.red-bg { 
    background-color: red; 
} 
.green-bg { 
    background-color: green; 
} 

@media screen and (min-width: 500px) { 
    .blue { 
     width: 50%; 
    } 
    .red { 
     width: 50%; 
    } 

} 

@media screen and (min-width: 700px) { 
    .blue { 
     width: 33%; 
    } 
    .red { 
     width: 33%; 
    } 
    .green { 
     width: 33%; 
    }  
}

出典

2016-06-25 04:35:13

マージン属性はdiv要素の内側の一部ではありません。しかし、box-sizing: border-boxを設定すると、borderはdiv要素の一部になります。したがって、border-widthを希望のパーセント値に設定し、をsolidに、border-colorをlightblueという背景色に設定します。あなたはdivの上余白を適用している場合、それはdiv要素の外側の部分に適用されます

http://www.w3schools.com/css/css_boxmodel.asp

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t background-color: lightblue; 
 
} 
 
.container { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
.box { 
 
\t width: 100%; 
 
\t height: 100px; 
 
    border-width: 5%; 
 
    border-color: lightblue; 
 
    border-style: solid; 
 
} 
 
.blue { 
 
\t background-color: orange; 
 
\t width: 100% 
 
} 
 

 
.red { 
 
\t background-color: red; 
 
} 
 
.green { 
 
\t background-color: green; 
 
} 
 

 
@media screen and (min-width: 500px) { 
 
\t .blue { 
 
\t \t width: 50%; 
 
\t } 
 
\t .red { 
 
\t \t width: 50%; 
 
\t } 
 
\t 
 
} 
 

 
@media screen and (min-width: 700px) { 
 
\t .blue { 
 
\t \t width: 33%; 
 
\t } 
 
\t .red { 
 
\t \t width: 33%; 
 
\t } 
 
\t .green { 
 
\t \t width: 33%; 
 
\t } 
 
\t 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Testing</title> 
 
\t <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="box blue"></div> 
 
    <div class="box red"></div> 
 
    <div class="box green"></div> \t 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-06-25 04:35:21

。そしてその理由のためにあなたは箱の幅を減らす必要があります。

1行に4つのボックスがある場合は、約1％のマージンを追加したい場合は、すべてのdivの1％幅を小さくする必要がある場合は、すべてに25％の幅を割り当てることができます。

出典

2016-06-25 05:45:39 Bhawna

応答性の問題を引き起こすマージン

答えて

関連する問題