CSS Padding

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2314 2314

CSS Padding

CSS 패딩 속성은 내용 주위에 공간을 생성하는 데 사용됩니다.

패딩은 요소 주위의 내용 (테두리 안쪽)을 지 웁니다.

CSS를 사용하면 패딩을 완벽하게 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 채우기를 설정하기위한 CSS 속성이 있습니다.

패딩 - 개별면

CSS에는 요소의 각면에 대해 채우기를 지정하는 속성이 있습니다.

padding-top

padding-right

padding-bottom

padding-left

모든 패딩 속성은 다음 값을 가질 수 있습니다.

length - px, pt, cm 등으로 패딩을 지정합니다.

% - 포함하는 요소의 폭의 %로 채우기를 지정합니다.

inherit - 패딩을 부모 요소에서 상속해야한다고 지정합니다.

다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 패딩을 설정합니다.

Example

p {

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

background-color: lightblue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
527	HTML	[css] 속기 font 속성 사용시 주의	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3219
526	HTML	공백 문자의 병합	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2296
525	HTML	제대로 단위 사용하자	aequum 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2604
524	HTML	혹시.. color=grey 라고 아세요? [5]	b1ack 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2198
523	HTML	거참 이거 질답에올려야하나여기올려야하나;; [5]	우리까미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2785
522	HTML	이미지를 돌려요 ~ [1]	낄낄닷컴 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2587
521	HTML	css3 메뉴	mydie 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2610
520	HTML	스타일시트 선언에서 media="screen" 와 media="print"의 차이점	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4758
519	HTML	가변 위치에 배너 붙이기 [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3803
518	HTML	[css질문]<input type=text>에 한글을쓰면 textbox가 움직이는데... [3]	b1ack 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6430
517	기타	알아두면 손 발이 편한 du 명령어 [3]	Kanzi 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3663
516	HTML	[vim] 주석 달기~ [1]	Kanzi 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2997
515	기타	div 레이아웃 잡기! [17]	코코남편 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4305
514	HTML	브라우저별 개발모드 [3]	K찰스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2971
513	JavaScript	Http Live Stream 에 관하여	visualp 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2574
512	JavaScript	img 자체에서 이미지 없을때 안보이게 하기 [12]	포그난 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	20147
511	기타	이미지맵 만들어주는 프로그램 [4]	켈리얀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	5305
510	HTML	유용한 함수 get_included_files [7]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2729
509	HTML	메타데이타를 제거하여 이미지 최적화하기 [5]	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3907
508	HTML	Loading Panel Widget	techer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2836
507	HTML	도와 주세요 [1]	호반의빛 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2065
506	HTML	DOM Method & Property	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	1981
505	HTML	[유용한팁][날짜]지정 년월의 마지막 일 구하기 [1]	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2575
504	HTML	[유용한팁][날짜]오늘의 년월일 가져가기	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2223
503	HTML	[유용한팁][날짜]요일 구하기[월화수목금토일]	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	4468
502	HTML	[유용한 팁][이벤트]사파리의 onload event	좋은천사7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2793
501	HTML	지역 3단계로 되는 동적셀렉트좀 봐주세요...ㅠㅠㅠㅠ [1]	김준수사랑 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2711
500	HTML	툴바 프로그램개발할때.... [1]	레인보우1492 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2196
499	HTML	코드 잘 모르는 이가 질문 [4]	네비플러스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2442
498	HTML	회원이 물품구매시 관리자페이지에 있는 관리자가 리플레쉬 안하고 바로 아는방법?? [1]	8제임스8 프로필 보기 이 회원 글보기 이 회원의 댓글보기	14년 전	2340