画像とテキストの間の空白を埋めたい

html
1<!DOCTYPE html>
2
3<html lang="ja-jp">
4
5
6  <head>
7  <link rel="stylesheet" href="style.css">
8  <meta charset="UTF-8">
9  <meta name="keywords"  content="">
10  <meta name="description" content="">
11  <body>
12    <div class="boxA">
13<div class="box3">
14<div class="pc">
15<img src="http://keisai.e3.valueserver.jp/wp-content/uploads/2018/07/IMG_20170801_125756_792-150x150.jpg" alt="店内" width="180" height="auto"/>
16</div>
17</div>
18<div class="box4">
19<div class="pc">
20<div class="pp">こんにちわ！神奈川県座間市にある古書店「景才堂」です。
21古書の買い取り販売の他、骨董や絵画等の買い取りも行っています。
22骨董や絵画はオークション形式で販売しております。
23蔵ごと査定、出張査定も行っていますので、お気軽にお問合せ下さい！</div>
24</div>
25</div>
26</div>
27<div class="sp">
28<div class="prImage">
29<img src="http://keisai.e3.valueserver.jp/wp-content/uploads/2018/07/tennnai01jpg.jpg" width="380" height="auto" class="aligncenter"/>
30</div>
31</div>
32<div class="sp">
33<div class="pp">こんにちわ！神奈川県座間市にある古書店「景才堂」です。
34古書の買い取り販売の他、骨董や絵画等の買い取りも行っています。
35骨董や絵画はオークション形式で販売しております。
36蔵ごと査定、出張査定も行っていますので、お気軽にお問合せ下さい！</div>
37</div>
38
39  </body>
40
41</html>

css
1@charset "UTF-8";
2
3body {font-style: `メイリオ`
4}
5
6
7/* パソコンで見たときは"pc"のclassがついた画像が表示される */
8.pc { display: block !important; }
9.sp { display: none !important; }
10/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
11@media only screen and (max-width: 750px) {
12.pc { display: none !important; }
13.sp { display: block !important; }
14}
15
16
17.my-skyblue {color: skyblue}
18
19.boxA:after {
20	content: "";
21	display: block;
22	clear: both;
23}
24
25
26
27.big1 {
28	font-size : 18px;
29	color : red;
30	padding-left : 2px;
31	padding-right :2px;
32}
33
34
35
36.big2 {
37	font-size : 18px;
38	color : blue;
39	padding-left : 2px;
40	padding-right :2px;
41
42}
43
44
45.big3 {
46	font-size : 15px;
47	color : blue;
48	padding-left : 2px;
49	padding-right :2px;
50
51}
52
53
54.big4 {
55	font-size : 22px;
56	color : red;
57	padding-left : 2px;
58	padding-right :2px;
59}
60
61
62.bigA {
63	font-size : 30px;
64	color : red;
65	padding-left : 2px;
66	padding-right :2px;
67
68}
69
70.bigB {
71	font-size : 32px;
72	color : black;
73	padding-left : 2px;
74	padding-right :2px;
75
76}
77
78.bold {
79	font-size : 19px;
80	font-weight : bold;
81}
82
83.bigH {
84	font-size : 28px;
85	font-weight :bold;
86	margin-top : 10px;
87	margin-bottom : 10px;
88	color : black;
89}
90
91
92.pp2 {
93	font-size: 14px;
94	margin-top : 10px;
95	margin-bottom : 5px;
96	margin-left : 10px;
97	line-height: 1.8;
98
99}
100
101
102.pp3 {
103	font-size: 11px;
104	margin-bottom : 5px;
105	line-height: 1.8;
106
107}
108
109
110.pp {
111	font-size: 12px;
112	margin-bottom : 5px;
113	margin-left : 10px;
114	line-height: 1.8;
115
116}
117
118div {
119	line-height: 2.0;
120}
121
122
123.box1 {
124	float: left;
125	width: 50%;
126	height: 300px;
127}
128
129
130.box2 {
131	float: left;
132	width: 50%;
133	height: 300px;
134}
135
136.boxB:after {
137	content: "";
138	display: inline-block;
139	clear: both;
140}
141
142.box3 {
143	float: left;
144	width: 35%;
145	height: 200px;
146	padding-right: auto;
147
148}
149
150.box4 {
151	float: right;
152	width: 65%;
153	height: 200px;
154	padding-left: auto;
155
156}
157
158.box5 {
159	float: left;
160	width: 35%;
161	height: 250px;
162	padding-right: auto;
163
164
165}
166
167.box6 {
168	float: right;
169	width: 65%;
170	height: 250px;
171	padding-left: auto;
172
173
174}
175
176.box7 {
177	float: right;
178	width: 30%;
179	height: 450px;
180	padding-left: auto;
181	padding-bottom: auto;
182
183}
184
185.box8 {
186	float: left;
187	width: 70%;
188	height: 450px;
189	padding-left: auto;
190	padding-bottom: auto;
191
192
193}
194
195.Dimage {
196	padding-top : 35px;
197	padding-bottom : 35px;
198	margin-top : 35px;
199	margin-bottom : 35px;
200}
201
202.dp {
203	margin-top : 45px;
204	margin-bottom : 55px;
205}
206