borderよりoutlineが便利!?

投稿日：2024.05.16

cssにてborderを入れるとレイアウト調整が必要に！！outlineならレイアウト調整が簡単です！！

• ブロック1
• ブロック2
• ブロック3
• ブロック4
• ブロック5

.cf:after{
content:"";
display:block;
clear: both;
}
ul.border_block li {
    width: 196px;
    height: 196px;
    border: 10px solid black; /* borderプロパティ */
    background: yellow;
    display: flex; /* Flexboxを使用して中央揃えにする */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    float:left;
    margin:0;
}

上記コーディングだと実際には要素の横幅が216pxになってしまいます。border10pxが左右に入る為。

• ブロック1
• ブロック2
• ブロック3
• ブロック4
• ブロック5

ul.outline_block li {
    width: 196px;
    height: 196px;
    outline: 10px solid black;
    background: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    margin: 0;
}

outlineだとborderの幅を考慮する必要はないです。outlineは、表示領域を持たないため、重ねて表示される形となります。