HTML_CSS_033_음수_margin

음수 마진 이용해서 이미지 여백 처리

html

<div class="con">
  <section></section>
</div>

css

.con{
/* 음수 margin을 이용하기 위한 조건 block/ inline-block으로 둘러싸진 형태에서 가능 */
  display:block;
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color:green;
  margin-left : auto;
  margin-right : auto;
  border:2px solid red;
}
.con > section{
  height: 50px;
  background-color:blue;
/*   마진을 이용해서 여백조절 가능 */
  margin-left: 10px;
  margin-right: -10px;
  margin-top: -10px;
}

Ex.1

html

<div class="con">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

css

.con{
  width: 100px;
  height: 100px;
  margin-top: 100px;
  margin-left : auto;
  margin-right : auto;
  border:4px solid red;
}
.con> section{
  height: 50%;
}
.con > section:nth-child(1) {
  background-color:gold;
  margin-top : -50%
}
.con > section:nth-child(2) {
  background-color:green;
  margin-left : -100%;
  width: 100%;
}
.con > section:nth-child(3) {
  background-color:grey;
  margin-right: -100%;
  margin-left:auto;
  width: 100%;
}
.con > section:nth-child(4) {
  background-color:pink;
}

Ex.2 옛날방식

html

<div class="con box-1 inline-grid">
  <img src="https://picsum.photos/id/11/600/600" alt="">
  <img src="https://picsum.photos/id/12/600/600" alt="">
  <img src="https://picsum.photos/id/13/600/600" alt="">
  <img src="https://picsum.photos/id/14/600/600" alt="">
  <img src="https://picsum.photos/id/15/600/600" alt="">
  <img src="https://picsum.photos/id/16/600/600" alt="">
  <img src="https://picsum.photos/id/17/600/600" alt="">
  <img src="https://picsum.photos/id/18/600/600" alt="">
  <img src="https://picsum.photos/id/19/600/600" alt="">
  <img src="https://picsum.photos/id/20/600/600" alt="">
  <img src="https://picsum.photos/id/21/600/600" alt="">  
  <img src="https://picsum.photos/id/22/600/600" alt="">>>
</div>

css

/* 노멀라이즈 */
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 인라인그리드 */
.inline-grid {
  font-size: 0;
}
.inline-grid > * {
  font-size: 1rem;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}
.con{
  width: 100%;
  margin-left:auto;
  margin-right:auto;
  background-color:#afafaf;
}
.box-1 > img {
/*   width: ( (100%/ 1행의 img의수) - img의 margin-rignt * (1행의img갯수 - 1) / 1행의img갯수) */
  width: (100% / 3 - 10px * (3 - 1) / 3)
  margin-top:20px;
}
.box-1 > img:not(:nth-child(3n)){
/*   border: 2px solid red; */
  margin-right: 10px;
}

Ex.3 요즘방식

html

<div class="con">
  <div class="box-1 inline-grid">
    <img src="https://picsum.photos/id/11/600/600" alt="">
    <img src="https://picsum.photos/id/12/600/600" alt="">
    <img src="https://picsum.photos/id/13/600/600" alt="">
    <img src="https://picsum.photos/id/14/600/600" alt="">
    <img src="https://picsum.photos/id/15/600/600" alt="">
    <img src="https://picsum.photos/id/16/600/600" alt="">
    <img src="https://picsum.photos/id/17/600/600" alt="">
    <img src="https://picsum.photos/id/18/600/600" alt="">
    <img src="https://picsum.photos/id/19/600/600" alt="">
    <img src="https://picsum.photos/id/20/600/600" alt="">
    <img src="https://picsum.photos/id/21/600/600" alt="">  
    <img src="https://picsum.photos/id/22/600/600" alt="">
  </div>    
</div>

css

/* 노멀라이즈 */
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 인라인그리드 */
.inline-grid {
  font-size: 0;
}
.inline-grid > * {
  font-size: 1rem;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}
.con{
  width: 100%;
  margin-left:auto;
  margin-right:auto;
  background-color:#afafaf;
}
.box-1 {
/*   background-color: #343434; */
  margin: 0 -10px;
}
.box-1 > img {
/*   여기서 이미지 수 만큼만 조절한다 */
  width: calc(100%/5);
  margin-top: 20px;
  padding: 0 10px;
}