画像テキストの横ならびを3段作成したところ画像下に余白ができ、余白を消す手段を探しています

現在下記サイトをみて、プログラミングに打ち直す練習をしているのですが、そのサイトの画像とテキストセットの3段が形成されるところをコード化しようとしたところ一段目の画像の下に余白ができ、2段目のテキストのバックグラウンドが余白分へこみ不格好になってしまいます。直接テキストのマージンやパディングにpxを打ち込んで修正しようとしているのですがうまくいきません。サイトを確認しても、やり方が異なっているようで正解を確かめることができず行き詰っております。下記に自分で作成中のhtml,cssも張り付けさせていただきます。ご指導いただければ幸いです。何卒よろしくお願いいたします。

参考サイト：https://note.com/krowl/n/n0b339b21bb50

自作html--------------------------------------------------------------

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample page</title> <link rel="stylesheet" href="css/style.css"> </head> <body>  <div style="position:absolute; top:15px; left:150px;"> <img src="images/logo.png" alt="logo" align="left"> </div> <div style="position:absolute; top:15px; right:400px;"> TEL 00-0000-0000<br> (受付時間　平日　９：００～１７：００) </div> <div class="ask"> <p>お問い合わせ</p> </div>  <div class="example"> <img src="images/main_image01.jpg"> <p>キャッチコピー</p> </div> <div class="under-example" > <p>テキストテキストテキスト</p> </div> <br> <nav> <ul id="main_nav"> <li><a href="#div01">1.テキストテキ<br>ストテキスト</a></li> <li><a href="#div02">2.テキストテキ<br>ストテキスト</a></li> <li><a href="#div03">3.テキストテキ<br>ストテキスト</a></li> </ul> <div class="box"> <div class="box-img"> <img src="images/photo01.jpg"> </div> <div class="text1"> <h4>1.テキストテキストテキスト</h4><br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="cb"></div> </div> <div class="box2-img"> <img src="images/photo02.jpg"> </div> <div class="box2"> <div class="text2"> <h4>2.テキストテキストテキスト</h4><br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="cb2"></div> </div> </div> <div class="box3-img"> <img src="images/photo03.jpg"> </div> <div class="box3"> <div class="text3"> <h4>3.テキストテキストテキスト</h4> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> <div class="cb3"></div> </div>  <div> TEL 00-0000-0000<br> (受付時間　平日　９：００～１７：００) </div> <div> お問い合わせ </div>  <div> @samplesamplesample </div> </body> </html>

自作css------------------------------------------------------------------

.ask {
position:relative;

}

.ask p{
position:relative;
top: 0px;
left:70%;
margin:0;
color: white;
background: red;
padding:20px 20px;
displeay:block;
width: 102px;
height:24px;

}

.example{position: relative;}

.example p{
position: absolute;
color: grey;
font-weight: bold;
font-size: 2em;
font-family:Quicksand, sans-serif;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
margine:0;
padding:0;
}

.example img{
width: 100%;
margin:0;
padding:0;}

.under-example {
position: relative;
mid-width: 600px;
padding-left: calc((100% - 600px)/2);
padding-right: calc((100% - 600px)/2);
margin:0;
padding:0;

}

.under-example p{
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
padding:0;
color: white;
background: grey;
font-size: 2em;
font-family:Quicksand, sans-serif;
display: block;
width: 100%;
height:auto;
text-align: center;
}
.under-example:after {
content: "";
display: block;
width: 0px;
height: 0px;
bottom: -43px;
border-top: 20px solid grey;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
left: 0;
right: 0;
margin: auto;
position: absolute;
vertical-align: middle;

}

nav {
height: 396px;
width: 100%;
margin: 0 auto;
}

#main_nav {
width: 67.5%;

min-width: 687px;
height: 396px;
overflow: hidden;
margin: 0 auto;
padding: 88px 0;
list-style:none;

}

#main_nav li {
float: left;
height: 225px;
width: 225px;
border: 2px solid #000;
border-radius: 50%;
position: relative;

}

#main_nav li:after {
content: "";
display: block;
position: absolute;
bottom: 22px;
right: 0;
left: 0;
width: 21px;
height: 21px;
margin: auto;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
transform: rotate(45deg);
}

#main_nav li:last-of-type {
float: none;
margin: 0 auto;

}
#main_nav li:nth-of-type(2) {
float: right;

}
#main_nav a {
color: #000;
font-size: 1.5rem;
position: absolute;
width: 100%;
text-align: center;
padding: 83px 0 100px;
text-decoration:none;
}

.text1{
background-color:#aaa;
height: 400px;

}

.text2{
background-color:#aaa;
height: 400px;}

.text3{
background-color:#aaa;
height: 400px;

}

.box-img{
float:left;
width: 50%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
margine:0;
padding:0;

}

.cb{
clear:both;
}

.box2-img{
float:right;
width: 50%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
vertical-align:top;

}

.cb2{
clear:both;
}

.box3-img{
float:left;
width: 50%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
vertical-align:top;

}

.cb3{
clear:both;
}

hatena19

2020/03/16 00:11

コードはマークダウンのコードブロック内にいれてください。 ```html HTMLコードをここに記述 ``` ```css CSSコードをここに記述 ``` あるいはコード部分を選択してから、ツールバーの<code>ボタンをクリックしてもいいです。

naki888

2020/03/16 19:59

承知いたしました。次回からコードブロックに入力するようにいたします。失礼いたしました。

x_x

2020/03/17 07:49

質問は編集できるので、今回の質問も修正願います。

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

回答2件

ベストアンサー

※修正依頼にもコメントしましたが、コードはマークダウンのコードブロック内にいれてください。

float:left; float:right; を使って横並びにしてますが、これをやめて、
CSS Flexbox か CSS Grid で横ならびレイアウトの実装に変更されることをお勧めします。

CSS Flexbox のコード例

html
1<div class="box">
2  <div class="box-img">  
3    <img src="https://placehold.jp/400x400.png">
4  </div>
5  <div class="text">  
6    <h4>1.テキストテキストテキスト</h4><br>
7    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
8  </div>
9</div>
10<div class="box">
11  <div class="box-img">
12    <img src="https://placehold.jp/400x400.png">
13  </div>
14  <div class="text">
15    <h4>2.テキストテキストテキスト</h4><br>
16      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
17  </div>
18</div>
19
20<div class="box">
21  <div class="box-img">
22    <img src="https://placehold.jp/400x400.png">
23  </div>
24  <div class="text">
25    <h4>3.テキストテキストテキスト</h4>
26    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
27  </div>
28</div>

css
1.box {
2  display: flex;
3  align-items: stretch;
4  height: 400px;
5}
6.box:nth-child(2n) {
7  flex-direction: row-reverse;
8}
9.text{
10  width: 50%;
11  background-color:#aaa;
12}
13
14.box-img{
15  width: 50%;
16  margine:0;
17  padding:0;
18}
19
20.box-img img{
21  background-repeat: no-repeat;
22  object-fit: cover;
23  width: 100%;
24  height: 400px;
25}