ホーム / HTML&CSS /

position:relative使用時のbottom指定でできる空白を埋める【HTML&CSS】

2019/11/30

HTML&CSS

relative使用時のbottom指定

BOX 01

BOX 02

.rel_bot_img01{
        position:relative; /* 相対位置 */
        bottom: 20px; /* 余白ができます */
}

相対位置（position:relative）使用時、bottom指定で配置すると下に空白ができてしまいます。
相殺する値をmargin-bottomで指定することにより空白部分を埋めることができます。

margin-bottomで空白を埋める

BOX 01

BOX 02

.rel_bot_img02{
        position:relative; /* 相対位置 */
        bottom: 20px; /* 余白ができます */
        margin-bottom: -20px; /* 余白分を相殺するため-の値を指定 */
}

76log