CSS의 패딩에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 패딩에 대한 자세한 설명

迷茫

Mar 25, 2017 pm 03:34 PM

구문:

패딩: [ | ]{1,4}

기본값 각 개별 속성을 살펴보세요

: table-row-group | table-column-group | 외부

상속

: 없음

애니메이션

: 예

계산된 값

: 각 독립 속성 참조

객체의 네 변의 내부 여백을 검색하거나 설정합니다.

4가지 매개변수 값을 모두 제공하면 상, 우, 하, 좌 순으로 4면에 적용됩니다.

1개만 제공되면 4개 면 모두 사용됩니다.
두 개가 제공되는 경우 첫 번째는 상하용, 두 번째는 왼쪽 및 오른쪽용입니다.
3개가 제공되면 첫 번째는 위쪽용, 두 번째는 왼쪽 및 오른쪽용, 세 번째는 아래쪽용입니다.
대체되지 않은 인라인 요소는 이 속성을 사용하여 왼쪽과 오른쪽에 내부 패치를 설정할 수 있습니다. 위쪽과 아래쪽에 내부 패치를 설정하려면 다음을 수행해야 합니다. 먼저 개체가 블록 수준 또는 인라인 블록 수준으로 표시되도록 만듭니다.
의 해당 스크립트 기능은
입니다.

CSS의 패딩에 대한 자세한 설명

확장자:

여백,border padding 값 약어

padding:

20px; == 패딩 : 20px 20px 20px 20px;

패딩 :

20px 10px; = = 패딩 : 20px 10px 20px 10px;

패딩 : 20px 10px 30px == 패딩 : 20px 10px 30px 10px;대변이 같으면 후자가 생략되고, 4변이 같으면 하나만

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>padding 填充</title>
    <style type="text/css">
    p,span{
        border: 1px dashed red;
    }    
    .sample0{
        padding: 20px;
    }
    .sample1{
        padding: 40px 30px 20px 10px;
    }
    .sample2{
        padding: 20px 10px 20px;
    }
  
    .parent{
        padding:20px;
    }
   
   .child{
       border: 1px solid blue;
   }
    </style></head><body>
    <p class="sample0">sample</p><br>
    <p class="sample1">sample</p>
    <br>
    <p class="sample2">sample</p>
    <br>
    <p class="parent">
        <p class="child">child </p>
    </p></body></html>

위 내용은 CSS의 패딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

슬라이드 아웃 바닥 글Apr 09, 2025 am 11:50 AM

마크 업이라는 매혹적인 새 사이트가 방금 시작되었습니다. 태그 라인 : Big Tech가 당신을보고 있습니다. 우리는 큰 기술을보고 있습니다. 위의 위대한 일. 그만큼

좋아하는 페이지Apr 09, 2025 am 11:47 AM

나는 다른 날 JavaScript로 RSS 피드를 구문 분석하는 것에 대해 게시했습니다. 또한 RSS 설정에 대해 Feedbin이 어떻게 핵심인지에 대해 이야기했습니다.

Codepen Gutenberg Embed Block for Sanity.io를 재현합니다Apr 09, 2025 am 11:43 AM

Chris Coyier의 WordPress의 Gutenberg 편집기 구현에서 영감을 얻은 Sanity Studio를위한 미리보기로 사용자 정의 코드펜 블록을 만드는 방법에 대해 알아보십시오.

CSS와 라인 차트를 만드는 방법Apr 09, 2025 am 11:36 AM

라인, 바 및 파이 차트는 대시 보드의 빵과 버터이며 모든 데이터 시각화 툴킷의 기본 구성 요소입니다. 물론 SVG를 사용할 수 있습니다

접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다Apr 09, 2025 am 11:30 AM

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.

SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법Apr 09, 2025 am 11:29 AM

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

PHP 템플릿에 대한 후속 조치Apr 09, 2025 am 11:14 AM

얼마 전, PHP 템플릿에 대해 PHP (기본적으로 HEREDOC 구문)에 대해 게시했습니다. 나는 문자 그대로 그 기술을 사용하여 슈퍼 기본을 사용합니다

부트 스트랩 구성 요소가있는 모달 이미지 갤러리 생성Apr 09, 2025 am 11:10 AM

다른 사진을보기 위해 탐색으로 더 큰 버전의 이미지를 열어주는 웹 페이지의 이미지를 클릭 한 적이 있습니까?

See all articles

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는