Visual Studio Code：Emmet記法でcssのmarginやpaddingに関するコードを展開する方法

margin

marginを指定するには「m」と入力すれば次のように出力されます。

body {
  /* m */
  margin: ;
}

フォーカスが；の前にあるのでpx、パーセント、remでサイズを入力します。

padding

paddingを指定するには「p」と入力すれば次のように出力されます。

body {
  /* p */
  padding: ;
 }

フォーカスが；の前にあるのでpx、パーセント、remでサイズを入力します。

px指定

marginで10pxと一気に指定するには「m10」と入力します。

body {
  /* m10 */
  margin: 10px;
 }

さらにmarginで10px 20px 30pxと一気に指定するには「m10-20-30」と入力します。

body {
  /* m10-20-30 */
  margin: 10px 20px 30px;
 }

パーセント指定

marginで10%と一気に指定するには「m10p」と入力します。

body {
  /* m10p */
  margin: 10%;
 }

さらにmarginで10% 20%と一気に指定するには「m10p20p」と入力します。

body {
  /* m10p20p */
  margin: 10% 20%;
 }

rem指定

marginで10remと一気に指定するには「m10r」と入力します。

body {
  /* m10r */
  margin: 10rem;
 }

margin-bottom

margin-bottomで10pxと一気に指定するには「mb10」と入力します。

body {
  /* mb10 */
  margin-bottom: 10px;
 }

情報源

#08 margin､paddingを展開してみよう | Emmet入門

CSSでmarginやpaddingに関するコードを展開していく方法について見ていきます。

dotinstall.com

書籍