The padding of a textarea is always fixed. When the text content of the textarea is scrolled, the padding remains near the edges.
The padding of a contenteditable element behaves differently. When the text content of the element is scrolled, the padding moves with it.
This demo illustrates the difference.
Can a contenteditable element by styled so its padding behaves more like textarea padding, staying in place while the text content is scrolled?
The answer to your specific question of whether a non-textarea "contenteditable" block level element's padding can behave like a textarea's is "no."
There is likely a way to achieve this look by adding additional elements to your div, but the padding of your div will always behave as padding is designed to.
Your padding issue has nothing to do with the "contenteditable" property. You could take the "cnotenteditable=true" off of your div, and the padding behaves the same way. Padding "clears an area around the content" of the element, which in this example is the text in your div. The padding will always remain around the text, not around the inside of the div.
<style type="text/css">
contenteditable] {
outline: 0px solid transparent;
}
</style><body>
<div style="padding:20px">
<div contenteditable="true"></div>
</div>
</body>So, as @scmccarthy22 said, padding just won't work. And he made a great answer explaining stuff, but there were no solutions.
The second top answer (with zero votes) had a solution: to add a wrapper element and put the padding on that. But, in ideal world all your styling would be done in CSS and CSS only, using JS or manipulating your HTML structure, although sometimes (or often) necessary, it's not ideal.
The third-top (/ last) answer gave a better solution using CSS only, but wasn't explained at all, and missed some things that would really make it work for the majority of people, so... here's the most valid answer addressing all of that ^^:
Padding has no effect, but border does. So, add:
border: 16px solid transparent; /* (where "16px" is your padding) */
But what if you need a border? Use a combination of inset and outline:
inset: 2px;
outline: 2px solid red;
inset is a property you don't see often so here is the MDN docs for it: https://developer.mozilla.org/en-US/docs/Web/CSS/inset
But basically, outlines does not take up space, and therefore doesn't affect the layout. So, when making outline replace border, which does take up space and does affect the layout... there's gonna be issues. We use inset to counteract that.
It goes without saying, make sure the inset distance is the same as the outline's width.
If you needed to combine an outline with a border, you're out of luck. You'll have to mess with the HTML and add a wrapper element, like (current) second-top answer suggests. Or, if it's for accessibility (as in letting the user know that they've selected on the thing) then style the &:active and &:focus pseudo-classes.
A reply in 2019. Set:
border: 10px solid black;
background: black;
color: white;
Works perfectly. fiddle: https://jsfiddle.net/shill/2k81acux/
© 2022 - 2024 — McMap. All rights reserved.
contenteditableelement and any other regular block element, because essentially acontenteditableelement is just behaving like any other block element. – Benjaminbenji:aftergets scrolled too ... :) why don't you use atextarea? :) at some point, simulating dedicated form elements gets really hairy :) – Cameratextareabut can be vertically centered within acontenteditableelement usingdisplay:flex. See this demo. I need text to be vertically centered, so atextareawon't do. – Rochellerochemont