[box] CSS - margin-inline 속성 - 인라인방향 양쪽 끝 바깥 여백 주기 (= margin-inline속성 = 마진인라인속성)

1. margin-inline 예제 - 인라인방향 양쪽 끝에 마진 주기
2. margin-inline 정의
3. margin-inline 구문
4. margin-inline 예제 - 인라인방향을 상하로 변경 (writing-mode 속성 사용)
5. margin-inline 예제 - 인라인방향을 우좌로 변경 (direction 속성 사용)

margin-inline 예제 - 인라인방향 양쪽 끝에 마진 주기

※ 인라인 앞뒤 마진이 동일값인 경우, 값을 1개만 지정해도 됨.

 

<style>

div {

  background-color: pink;

  width: 25%;

  height: 100px;

  float: left;

}

#hz {

  background-color: lightblue;

  border: 1px solid black;

  margin-inline: 50px;

}

</style>

<div>홈짱닷컴</div>

<div id="hz">Homzzang.com</div>

<div>그누보드 코딩 강의</div>

 

결과보기

margin-inline 정의

 

요소의 인라인방향 시작마진과 끝마진의 값을 일괄 지정.

(즉, margin-inline-start 속성과 margin-inline-end 속성을 한번에 지정한 셈.)

 

---

 

1. 속성값 개수가 1개냐 2개냐에 따라 의미 다름.

• 속성값 개수가 1갱이면, 시작마진과 끝마진을 동일하게 일괄 지정한 것임. (예) margin-inline: 50px; // 시작마진 50px, 끝마진 50px
• 속성값 개수가 2개이면, 시작마진과 끝마진을 각각 지정한 것임. (예) margin-inline: 10px 50px; // 시작마진 10px, 끝마진 50px

2. 

margin-inline 및 margin-block 속성은 블록 및 인라인 방향에 따라 달라집. 반면, margin-top, margin-bottom, margin-left and margin-right 속성은 방향 고정임.

 

3. 

writing-mode 및 direction 속성 이용해 인라인방향 변경 가능.

 

4.

• 기본값: auto
• 상속여부:X
• 애니가능: O
• CSS버전:CSS3
• JS구문: object.style.marginInline="10px 50px"

 

5.

IE 제외한 주요 최신 브라우저 모두 지원.

 

6. MDN margin-inline 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline

 

margin-inline 구문

 

selector {margin-inline: auto|value|initial|inherit;}

 

---

[속성값]

 

auto

요소의 기본 인라인방향 마진값. (기본값)

 

value

px, pt, cm 등 길이 단위 사용해 절대 길이로 표현 (음수값 허용)하거나 % 단위 사용해 부모 너비에 대한 상대 길이로 지정 가능.

• 값이 1개인 경우 - 인라인 시작마진과 끝마진이 동일. (예) 50px
• 값이 2개인 경우 - 앞값은 시작마진, 뒷값은 끝마진. (예) 10px 50px

 

initial

이 요소의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

margin-inline 예제 - 인라인방향을 상하로 변경 (writing-mode 속성 사용)

 

<style>

#box { 

  width: 60%;

}

#box > div {

  writing-mode: vertical-rl;

  block-size: 100%;

  box-sizing: border-box;

}

#box > div:not(#hz) {

  background-color: pink;

  inline-size: 20%;

}

#hz {

  background-color: lightblue;

  inline-size: 30%;

  border: 1px solid black;

  margin-inline: 10px 50px;

}

</style>

<div id="box">

    <div class="both">홈짱닷컴</div>

    <div id="hz">Homzzang.com</div>

    <div class="both">그누보드 코딩 강의</div>

</div>

결과보기

margin-inline 예제 - 인라인방향을 우좌로 변경 (direction 속성 사용)

 

<style>

div {

  background-color: pink;

  width: 25%;

  height: 100px;

  float: left;

}

#hz {

  background-color: lightblue;

  border: 1px solid black;

  margin-inline: 10px 50px;

  direction: rtl;

}

</style>

<div>홈짱닷컴</div>

<div id="hz">Homzzang.com</div>

<div>그누보드 코딩 강의</div>

 

결과보기