inline에도 margin과 padding이 적용될까?

inline

inline 태그는 높이와 너비가 없기 때문에 margin 상, 하를 가질 수 없다.

margin 좌, 우 적용되고 padding은 상, 하, 좌, 우 모두 적용된다.

 

실무에서 inline에 margin 상하를 적용하고 싶다면 어떻게 해야 할까?

inline을 block으로 만들어주면 된다.

display: block;

block 태그는 높이와 너비가 있고, margin과 padding을 상, 하, 좌, 우로 가질 수 있다.

 

inline과 block에 대해 다시 한 번 정리하기 위해 기록한다.

semantic tags : header, nav, main, article, section, aside, footer => 이러한 시맨틱 태그들 블록 레벨 요소로, 수직으로 공간을 차지한다. 이 태그들은 모두 HTML5에서 도입된 블록 레벨 요소(block-level elements)이다.

블록 레벨 요소는 기본적으로 화면 전체의 가로폭을 차지하며, 새로운 줄에서 시작하여 위 아래로 쌓이는 특징을 가지고 있다.

<header> : 문서나 섹션의 머리말을 나타낸다.

<nav> : 내비게이션 링크를 그룹화한 영역을 나타낸다.

<main> : 문서의 주요 콘텐츠를 감싸는 컨테이너로, 한 문서에는 하나만 존재해야 한다.

<article> : 독립적인 컨텐츠 조각으로 사용될 수 있는 구획을 나타낸다.

<section> : 문서의 일반적인 구획을 나타낸다.

<aside> : 주변 콘텐츠와 약간 연관된 내용을 나타낸다.

<footer> : 문서나 섹션의 꼬리말을 나타낸다.