공간 좀주세요

그렇게하는 모든 방법이 있습니다. 물론 다른 상황보다 특정 상황에 대해 더욱 권장되고 더 적합합니다.

우리는 HTML에서 직접 할 수 있습니다.

 <p> 우리는 한 줄에서갑니다 ... <br> <br> 두 부를 더 아래로 내려 가면 </p>

그러나 그것이 CSS가 실제로 다음과 같습니다.

 <p> 우리는 한 줄에서갑니다</p>

 기간 {
  디스플레이 : 블록;
  마진 블록 스타트 : 1.5rem;
}

라인 높이는 또한 텍스트 라인 사이에 추가 호흡 공간을 제공 할 수 있습니다.

 p {
  라인 높이 : 1.35;
}

우리는 텍스트를 말하고 있기 때문에 문자 스케팅 및 단어 스펙팅도 있습니다.

그러나 텍스트 대신 상자에 대해 이야기합시다. 두 개의 간단한 div가 있다고 가정합니다.

 <div> twiddle dee </div>
<div> twiddle dum </div>

그것들은 블록 레벨이므로 이미 다른 라인에 있습니다. 우리는 다시 마진에 도달 할 수 있습니다. 또는 패딩으로 공간의 인상을 만들 수 있습니다. 나는 우리가 그 빨판을 어느 방향 으로든 번역 할 수 있다고 생각합니다.

 div : nth-Child (2) {
  변환 : Translatey (100px);
}

그러나 어쩌면 이러한 요소는 절대적으로 배치되어있어 물리적 오프셋을 사용할 수 있습니다.

 div {
  위치 : 절대;
}
div : nth-Child (1) {
  삽입 : 0;
}
div : nth-Child (2) {
  삽입 된 라인 시작 : 100px; /* 또는 상단 : 100px; */
}

우리가 그리드 컨테이너에서 일하고 있다면, 우리는 갭 이그를 얻습니다.

 
  <div> twiddle dee </div>
  <div> twiddle dum </div>
섹션>

 부분 {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 1fr 1fr;
  갭 : 100px;
}

유연한 컨테이너와 동일한 거래 :

 부분 {
  디스플레이 : Flex;
  갭 : 100px;
}

우리는 그리드 및 유연한 컨테이너에서 일하는 동안 모든 정렬 속성을 요구하여 공간을 생성 할 수 있습니다.

 부분 {
  디스플레이 : Flex;
  정렬 구조 : 공간 중간;
  정당화 컨텐츠 : 공간 중간;
}

물론 테이블이 있습니다.

 
  
  <tbody>
    <tr>
      <td> twiddle dee </td>
      <td> twiddle dum </td>
    </tr>
  </tbody>
테이블>

또는 CSS-Y 접근법 :

 /* 테이블 요소에서 작동하지 않는 경우`display : table`을 사용할 수 있습니다. */
테이블 {
  국경 간격 : 100px;
}

왼쪽 필드로 더 깊이 들어 갑시다. 딱딱한 색상 정지가있는 선형 그라디언트를 사용하여 하나의 요소를 두 가지처럼 보이게 할 수 있습니다.

 div {
  배경 이미지 :
    선형 그레이드 (
      오른쪽으로,
      RGB (255 105 0 / 1) 50%,
      RGB (207 46 46 / 1) 50%,
      RGB (207 46 46 / 1) 100%
    );
}

그런 다음 헤드 가짜를하고 두 가지 색상 사이에 단단한 투명 색상 정지를 삽입합니다.

우리가 여기 베이컨을 짜는 한, "투명한"국경 트릭에도 던질 수도 있습니다.

잠시 텍스트로 돌아가 봅시다. 어쩌면 우리는 요소를 떠 다니고 텍스트가 주위를 감싸기를 원할 수도 있습니다. 우리는 다음을 위해 Shape-Margin을 가지고 있습니다.

감히 나는 Spacer.gif Days를 언급해야합니까?

 <div> twiddle dee </div>
<img  src="spacer.gif" alt="공간 좀주세요" > 
<div> twiddle dum </div>

더 많은 것이 있습니다

당신은 모두 훌륭한 아이디어를 가진 똑똑한 무리입니다. 그것에!

위 내용은 공간 좀주세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!