2014-12-20 4 views
4

textarea의 패딩은 항상 고정되어 있습니다. 텍스트 영역의 텍스트 내용이 스크롤되면 패딩이 가장자리 근처에 유지됩니다.contenteditable 요소의 고정 된 패딩

contenteditable 요소의 패딩은 다르게 동작합니다. 요소의 텍스트 내용이 스크롤되면 패딩이 함께 이동합니다.

This demo은 그 차이점을 설명합니다.

contenteditable 요소는 스타일이 적용되어 패딩이 텍스트 콘텐츠가 스크롤되는 동안 textarea 패딩과 같은 모양으로 동작합니다.

+0

좋은 질문입니다. 본질적으로'contenteditable' 엘리먼트는 다른 블록 엘리먼트처럼 행동하기 때문에'contenteditable' 엘리먼트와 다른 일반 엘리먼트 사이를 구별 할 수 있을지, 또 그렇게해야하는지 궁금합니다. – BoltClock

+0

그리고': after'도 스크롤됩니다 ... :) 왜'textarea'를 사용하지 않습니까? :) 어떤 점에서, 헌신적 인 형태 요소를 시뮬레이션하는 것은 정말로 털이 많다 :) – sodawillow

+0

언뜻 보면 이상하게 보인다. 차이점은 텍스트는 텍스트 영역 내에서 수직 중심에 위치 할 수 없지만'display : flex'를 사용하여'contenteditable' 요소 내에서 수직 중심에 위치 할 수 있다는 것입니다. [이 데모] (http://jsfiddle.net/jyuko6gx/4/)를 참조하십시오. 나는 텍스트가 수직 중심에 있어야하므로'textarea '는하지 않을 것이다. –

답변

1

비 텍스트 영역 "contenteditable"블록 레벨 요소의 패딩이 텍스트 영역과 같이 동작 할 수 있는지에 대한 구체적인 질문에 대한 답은 "아니오"입니다.

div에 요소를 추가하여이 모양을 구현하는 방법이 있지만 padding이 설계된대로 div의 패딩이 항상 작동합니다.

여백 문제는 "contenteditable"속성과 관련이 없습니다. div의 "cnotenteditable = true"를 취하면 padding은 같은 방식으로 동작합니다. Padding은 요소의 "내용 주변 영역을 지 웁니다."이 예제에서는 div의 텍스트입니다. 채우기는 항상 div 주위에있는 것이 아니라 텍스트 주위에 유지됩니다.