縦の余白を詰めたい＆３つの要素の高さを揃えて並べたい

Question

お世話になっております。
どうしても自力で解決できず、質問させて頂いております。

２点ございます。

１．下記画像の日付と日付の間の余白を詰めたい。
margin-bottomをゼロにしても、余白が詰まらず困っております。

２．日付、アイコン、文章の高さを揃えたい。
どうしてもPだけ下にズレてしまいます。

ご助言頂けると大変助かります。
何卒よろしくお願い申し上げます。

【記述コード】

<article id="news" class="pc">
    <h2>NEWS</h2>
    <div class="news">
    <time>2017 10 01</time>
        <img src="img/icon_news_oshirase.jpg">
        <p>コーポレートサイトのトップページをリニューアル致しました。<br>
        うまく表示されない際は、スーパーリロード&#40;Ctrl+F5&#41;してください。</p>
    </div>
    <div class="news">
    <time>2017 09 29</time>
        <img src="img/icon_news_event.jpg">
        <p><a href="http://kimijimaya.co.jp/wordpress/index.php/2017/09/26/kimijimakai2017/">今年も開催された君嶋会、大盛況の様子をブログでご報告！</a></p>
    </div>
    <div class="news">
    <time>2017 09 01</time>
        <img src="img/icon_news_oshirase.jpg">
        <p><a href="download/recom_sake201709.pdf">9月の日本酒おススメリスト、アップしました！</a></p>
    </div>
    </article>


time{
    font-size: 1.4rem;
    margin-right: 3%;
}
.news{
    display: flex;
    height: 14px;
}
.news div{
    height: 14px;    
    }   
.news img{
    width: 60px;
    height: 14px;
    margin-right: 5%;
}
.news p{
    background-color: #fff;
    font-size: 1.4rem;
    height: 14px;
    padding-left: 0;
    margin-bottom: 0;
}
#news{
    margin-top: 0;
    margin-bottom: 10%;
    border-top: solid 1px #002E4E;
    border-bottom: solid 1px #002E4E;
}

Answer 1

下記画像の日付と日付の間の余白を詰めたい。

newsクラスに設定されているmargin-bottomを変更することで可能だと思います。

.news {
    margin-bottom: 0;
}

日付、アイコン、文章の高さを揃えたい

pタグにpaddingを設定しているからではないかと思います。

.news p {
    background-color: gainsboro;
    font-size: 1.2rem;
    /* padding: 1%; */
}

Comments

[yk_ol]

s8_chu様

何度も本当にありがとうございます！
おかげ様で要素の高さが揃いました。