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>
A reply in 2019. Set:
border: 10px solid black;
background: black;
color: white;
Works perfectly.
fiddle: https://jsfiddle.net/shill/2k81acux/
Related
When there is an empty div with contenteditable="true":
CSS:
[contenteditable="true"] {
border: 1px dashed #dedede;
padding: 3px;
}
HTML:
<div contenteditable="true">
<!-- blank by default -->
</div>
In IE and Chrome, it shows the height like a normal input field with small padding. In Firefox, it only shows that 3px padding I added in the styles. W/o that, it collapses and is only as tall as the border.
Do you know if this is a Firefox bug? Can you suggest a way to handle it?
workaround:
[contenteditable='true']:before {
content: "\feff ";
}
CSS2 section 10.6.3:
The element's height is the distance from its top content edge to the first applicable of the following:
the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
zero, otherwise
For this empty div,
1 through 3 are not applicable, since the div is empty. It has no line boxes or children.
Item 4 therefore applies.
The workaround enforces at least one line box inside the div, so that it gets nonzero height.
This works just fine for me in firefox
http://jsfiddle.net/D6D6A/
html:
<div contenteditable='true'></div>
css : changed to black border so easier to see
[contenteditable='true'] {
border: 1px dashed #000;
padding: 3px;
}
notice if you change padding to 0px , it has no height. However, with the 3px padding, it works like it should.
Can anyone explain the behaviour of the divs here http://jsfiddle.net/Z7z5Q/ ? I wonder, why they are not aligned on one line ? And why adding text to div moves other divs ?
Here is html and css:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend">Some text in more than two line, actually in 3</div>
<div class="family">Some text in two line</div>
<div class="friend" id="best_friend"></div>
<div class="enemy" id="archnemesis"></div>
<div class="friend">Some text</div>
<div class="family"></div>
<div class="friend"></div>
<div class="family"></div>
</body>
</html>
Css:
div {
display: inline-block;
margin-left: 5px;
height:100px;
width:100px;
border-radius: 100%;
border: 2px solid black;
}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
#best_friend {
border:4px solid #00C957;
}
#archnemesis {
border: 4px solid #CC0000;
}
Thanks. Will appreciate links to docs or articles.
The elements are aligned... but not in the way you intended it, obviously ;)
The key to your problem is the property vertical-align.
First remove border-radius in order to better see the boxes.
Then add vertical-align: middle;: problem solved (see fiddle)
Content or not, each box is now aligned relatively to its fixed height (you fixed it to 100px).
What happened in the first place without vertical-align: middle;? Change the value for baseline: you're back to the original problem. This is the default value, the one you do want when displaying text in spans for example or a label and the text of a text field, whatever the padding and margin on both. But with text forced to occupy 2 or 3 lines (boxes are 100px wide whatever their content), the baseline is very different from what you'd expect, it's the baseline of the content aka the last line of text.
Same with empty div: as they lack content to align with, their baseline is their bottom side (not so sure about this one, but that's what seems to happen).
Add a single character or a non-breakable space in some empty div: their baseline is now completely different from an empty div. See other fiddle
The same phenomenon happens with a tall image lost in a paragraph of text; you can align it with vertical-align but the difference is that it's easier to see what's happening. Here you haven't a single occurence of "normal" text so spotting it is a bit harder.
Why float: left; does work here? It'll take each box, all of the same height, and align it relative to the box, not to its content. But then you've to manage clearing and 1px more on a box can break the alignment of all the following boxes...
inline-block is an attribute with a number of curiosities. In this example, you can plainly see that removing height: 100px from the div CSS rules will result in the elements having their text aligned, which isn't so obvious with the flashy circle-shaped dashed multicolored borders. So to fix this, you would apply vertical-align: top. (source)
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
(from a great answer from another thread)
In comparison, floats align at the top by default.
align on one line
div {vertical-align: middle;}
Adding a float:left; will solve this problem see here: http://jsfiddle.net/Z7z5Q/5/
Also adding vertical-align:top; will solve it as well: http://jsfiddle.net/Z7z5Q/7/
This is because inline-block behaves weird with white spaces in html.
You can see the code of the page here.
I don't know why there is that padding with yellow background around the Button. I've also tried to put the same code on Fiddle, but seems that there isn't that padding.
Which attribute I miss?
Your div that wraps the button has an inline style that sets the background yellow:
<div class="categoryName4" style="background-color:#FFFF00;">
div element has a default of 5px padding if I remember correctly.
Try adding an id tag,
<div id="box">
And use this css:
#box {margin: 0; padding: 0;}
The containing <div> has fixed width - get rid of that and you won't have that "padding".
i am wondering why the textarea refuses to stay aligned with the containing div?
<!-- the textarea pokes out-->
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%"></textarea>
</div>
It is causing me difficulty in ensuring alignment of elements
By default, a <textarea> element is rendered with a border around it. The problem with this is that when you set the width property on an element, you're only setting the content width, not the total width. The total width of the element is (width + border + padding + margin) so when you set the width on the <textarea> to be 100% it sets the content width to 300px but the total width is that 300px plus the default borders, which causes it to exceed the 300px width of the <div>.
You'll could accommodate these borders in the <div> using padding/margins, but a better solution would be to set the box-sizing property on the <textarea> to border-box to force the width property to define the total width of everything up to and including the border of the element.
You'll need to do a bit of research on that property because it's declared differently in all browsers (e.g. -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing, etc.). Here is the QuirksMode page on box-sizing for you to look through.
The box-sizing fix works for Firefox, but I haven't tested it in other browsers. It's possible that some of them, particularly when in quirks/legacy mode, could also apply a margin to the element. If this is the case, then all you would need to do would be to remove the margins with CSS (AFAIK, there isn't a widely supported option for box-sizing that extends to margins - only ones for content, padding, and border).
I'd suggest being specific with this fix, and only removing the left/right margins (i.e. margin-left: 0; margin-right: 0;) rather than removing margins entirely (i.e. margin: 0;) to preserve any top/bottom margins if they exist (and if you want to keep them). I know Firefox applies a 1px margin to the top/bottom, and other browsers might as well.
I tried that in Firefox, Chrome and IE, and they all show it properly. I suspect that you DIV is inside of another container and that's causing the problem.
Please add a part of your code.
The textarea may have a margin being applied to it. Try this:
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%; margin: 0;"></textarea>
</div>
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%"></textarea>
</div>
Tested working on Firefox 3.6.10, Internet Explorer 8 and Google Chrome.
But, maybe instead of enclosing it in a DIV, you can also try this:
<textarea style="border:1px solid #ccc; width:300px"></textarea>
Which about has the same looks as your original code.
Using HTML and CSS.
I have text surrounded by a border using display:inline to make the border just larger than the text. The problem is that the border overlaps certain surrounding block-level elements. It overlaps <table> and <form>, but not <p>.
CSS:
.bordered {
padding: 0.6em;
border-style: solid;
border-width: 2px;
background-color: #FFFFCC;
border-color:#E8E800;
display: inline;
}
HTML:
<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<p>Some paragraph text</p>
<div class="bordered">Some bordered text</div>
<table><tr><td>Table text</td></tr></table>
Result:
Why is this? And why is it inconsistent between different block-level elements? I would expect that the table cell text be vertically aligned the same as the paragraph's.
Follow up: The whole reason why I have display:inline is so that the border is only as wide as the text. If using display:block (the default for <p>) then the border is as wide as the parent element.
The P tag isn't a vanilla block level element. Its default state in most user agents specifies some top and bottom margins. The TABLE tag doesn't. So the P tag is pushing the inline DIVs farther apart.
margins on P tag http://homepage.mac.com/estranged/images/css01.png
margins on TABLE tag http://homepage.mac.com/estranged/images/css02.png
It is doing the block level elements the way you expect. None of the block-level elements are overlapping.
But the bordered text is not a block level element because you made it an inline box. If you put the bordered text inside the <p>, or inside it's own <p>, or get rid of the display: inline, then you will get a box-level layout as you expected.
Update: yet another way to fix this would be to put the stuff above the table inside a div (that isn't inline) and then style that div with identical but transparent margins and padding.
.blockMargin {
padding-bottom: 0.6em;
border-width: 2px;
border-color: transparent;
}