画像に余白ができない

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
Monacaで買い物リストを追加するシステムを作っています。
文字に余白をつけることはできたんですが、プラスとマイナスの画像に余白ができません

#plus img{
    height:35px;
    width:35px;
    margin:0% 10% 0% 0%;←これが動かない
}

プラスとマイナスの画像に余白ができない
###該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11    </script>
12</head>
13<body>
14	<div id="header">
15        <img class="upicon1" src="menu.png">
16        <h1 id="title">リスト</h1>
17        <img class="upicon2" src="back.png">
18    </div>
19    <div id="menu">
20    </div>
21    <div class="a" id="main">
22        <div class="b" id="list">
23            <div class="list" id="Goods">りんご</div>
24            <div class="list" id="count">一つ</div>
25            <div id="Adjustment">
26                <div class="list" id="plus"><img src="plus.png"></div>
27                <div class="list" id="minus"><img src="minus.png"></div>
28            </div>
29        </div>
30        <div class="b" id="category">カテゴリ</div>
31    </div>
32</body>
33</html>

css
1/**/
2body,h1{
3    margin: 0px;
4    padding: 0px;
5}
6div img {
7    height:62px;
8    width:62px;
9    padding: 2px;
10}
11
12#header {
13    display: flex;
14    justify-content: space-between;
15}
16/**/
17#list{   
18display: inline;
19display: block;
20border: 1px solid #9F99A3;
21background-color: #EEEEEE;
22text-decoration: none;
23color: #333;
24width:66%;
25text-align: left;
26font-size: 25px;
27}
28#Goods{
29    margin:0% 30% 0% 0%;
30}
31#count{
32    margin:0% 20% 0% 0%;
33}
34#plus img{
35    height:35px;
36    width:35px;
37    margin:0% 10% 0% 0%;
38}
39#minus img{
40    height:35px;
41    width:35px;
42    margin:0% 10% 0% 0%;
43}
44.list{
45    float:left;
46}
47.b{
48    overflow: hidden;
49}
50/* clearfix */
51.b:before,
52.b:after {
53    content: "";
54    display: table;
55}
56.b:after {
57    clear: both;
58}
59#category{   
60display: inline; 
61display: block; 
62border: 1px solid #9F99A3;
63background-color: #EEEEEE;
64text-decoration: none;
65color: #333;
66width:33.5%;
67text-align: center;
68font-size: 25px;
69}
70.b{
71    float:left;
72}
73.a{
74    overflow: hidden;
75}
76/* clearfix */
77.a:before,
78.a:after {
79    content: "";
80    display: table;
81}
82.a:after {
83    clear: both;
84}

行動規範の内容に同意します

回答1件

ベストアンサー

#Adjustment { width:100% }
を入れたらどうでしょうか。
%は基本的に親に対しての％で相対値になりますので、
親に数値がないとききません。
それでもダメな場合は、%でなくpxで設定してみてください。

投稿2017/07/07 10:49

cheche0830

総合スコア187

kei344

2017/07/07 13:06

コードブロックを使われてはいかがでしょう。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。ちなみにコメント欄では使えません･･･。 ```CSS #Adjustment { width:100% } /* コードブロックでないと「#」がマークダウンで「ｈ要素」に置き換わってしまう */ ```