iSara模写 <li>の下にある余白を消したいです。

Question

iSara模写　<li>の下にある余白を消したいです。

イサラの模写をしているのですが、写真のようにリストの下の部分に少し余白ができているのですが、どうしたら消すことができますか？

該当のソースコード

<div class="classContainer clearfix">
        <div class="classBox">
          <p class="txtm">渡航前の事前学習</p>
          <ul class="txts">
            <li>０から始めるプログラミング事前学習講座</li>
            <li>参加者グループコミュニティ</li>
            <li>チャットサポート</li>
            <li>事前スカイプコンサル</li>
            <li>環境構築の事前学習</li>
            <li>jQueryの事前学習講座</li>
            <li>Bootstrapの事前講座</li>
            <li>PHP / Mysqlの事前学習講座</li>
            <li>稼ぐためのHTML/CSS講座</li>
            <li>WordPressの事前学習講座</li>
          </ul>
        </div>

.classContainer {
  width: 810px;
  margin: 0 auto;
  padding: 40px 0;
}

ul {
  list-style: none;
  background-color: #fff;
  color: #333;
  padding: 0;
}

li {
  font-weight: 600;
  padding: 10px;
  border-bottom: 1px dotted #e5e5e5;
}

.classBox {
  width: 371px;
  margin: 0 15px;
  background-color: #fff;
  border: 2px solid #016ea9;
  border-radius: 5px;
  float: left;
}

.classBox p {
  background-color: #016EA9;
  padding: 15px;
}

Answer 1

ul要素についたmarginのようです。
余白をなくす場合、最下部のli要素についたborderも消してしまった方が良いです。

ul {
	margin-bottom: 0;
}

ul li:last-child {
	border: none;
}

その他のHTMLがどうなっているか分からないですが、ulでなく.txtsや.classBox ulなどで指定した方がいいかも知れませんね。

Comments

[jamjam-130]

回答ありがとうございます！教えていただいた通りにやって解決できました！
last-child、今後もたくさん使いそうですね！しっかり覚えておきます＾＾