Google Clone Coding

🥨 保証金はもらえますか。マットをもらえますか?

paddingの場合:
border内部範囲なのでクリックスペースが広がります.
margineを渡すと:
border外部範囲なのでクリックスペースが小さくなります.

🥨 整列

*Flex Box Layoutサイトのクリーンアップ
垂直軸スキーム:align-items

align-items: flex-start

align-items: center

align-items: flex-end

水平軸タイリング:qualified-content

justify-content: center

justify-content: space-between

🥨 ツールバーの

中央揃え

marginプロパティの使用
エレメントを囲むコンテナエレメントに対して水平方向中央揃え
幅を除いて、残りの空間は左右に均等に空白に分けられます.
まず要素のwidth属性値を設定する必要があります.

<style>
    div {
        width: 300px;
        margin: auto;
    }
</style>

左右揃え

の位置プロパティの使用
絶対的な位置決めで位置決めされた要素は、通常のレイアウトから離れ、他の要素とオーバーラップすることができます.したがって,この特性を利用してHTML要素を水平に左右に揃えることができる.
positionプロパティを使用してソートする場合は、要素にmarginとpaddingプロパティ値を設定することが望ましい.これにより、異なるWebブラウザが異なるレイアウトを表示することを防止することができる.

<style>
    div { 
        width: 300px;
        padding: 10px;
        margin: 0;
        position: absolute;
        right: 0;
    }
</style>

floatプロパティの使用
floatプロパティを使用してソートする場合は、要素に余白とpaddingプロパティ値を設定することが望ましい.これにより、異なるWebブラウザが異なるレイアウトを表示することを防止することができる.

<style>
    div {
        width: 350px;
        padding: 10px;
        margin: 0;
    }
    div.left { float: left }
    div.right { float: right }
</style>

🥨 inline-block

display: inline-block

inline要素のように1行に並んでいます.

ですが、block要素のように幅と高さを設定できます.