TIL.07 Inline & block & inline-block

2034 ワード
WeCode 上のコード テキストリンク

Inline

/* 기본적으로 inline으로 설정된 태그들은
   따로 설정해줄 필요가 없다. */

selector {
	display: inline;
}
  • を含むコンテンツの幅のみを占めます.
  • は改行しません.
  • 幅と高さ(height,width)
    • は使用できません.
  • 毛辺とダウンジャケットは横方向にのみ適しています.
  • <a> , <span> , <em> , <strong>
    • <a>タグにマージンと充填の例を適用し、ダウンジャケットを適用したがblock要素を侵害した.

    block

    /* 기본적으로 block으로 설정된 태그들은
   따로 설정해줄 필요가 없다. */

selector {
	display: block;
}
  • の幅は100%です.
  • の幅と高さを持つことができます.
  • 要素は垂直方向に次々と堆積する.
  • <body> , <div> , <h1>~<h6> , <nav> , <p> , <ul> , <ol> , <li>

    • inline-block

    
selector {
	display: inline-block;
}
  • inlineのような外観を持つが、blockのような特徴を持つ.
  • が所有するコンテンツのサイズのみを占有します.(like inline)
  • は改行しません.(like inline)
  • の幅と高さを持つことができます.(like block)
  • ダウンジャケットと利益を適用できます.(like block)
    • JUC——01
    [TIL Python]Forとrange