How many pixels is a space equal to?

This is my code:

<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
        <div contenteditable=true>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&n开发者_运维问答bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            aaaaa
            bbbbbbbbbbb
        </div>
</div>

I want to fill all of the space in the div.

How many pixels is the  ?

---

You can create a <div> containing   and assign an id. Set the font size and attributes. Then read the current width and height using:

var space=document.getElementById("space");
var height=(space.clientHeight+1)+"px";
var width=(space.clientWidth+1)+"px";

---

It depends on the font, size, etc. There's no direct equation/number for spaces to pixels.

---

It's dependent on the font size because   is a white-space character.

---

An "em" (1 character width) is often considered to be 16 x 16 pixels. Of course, if a viewer resizes text, that would change.

I'm not sure what you're trying to do, but if you just want empty space above your text, you could put another div (for the text) inside your div, and then set a " margin-top: 10em; " (or however many ems you want) to provide the blank space.

---

There is no way to answer this question honesty, as the size of one space changes depending on the font size.

Try this, changing the "30px" to whatever you want.

<div style="position:absolute;top:300px;width:50px;height:50px;background:red;color:black;word-wrap:break-word;">
        <div contenteditable=true style="margin-left: 30px;">
            aaaaa
            bbbbbbbbbbb
        </div>
</div>

---

The answer will depend on the font you are using and the styles it has been given. So you'll need to calculate it dynamically in the page.

Use Javascript to create an div that is displayed off the page (i.e left:-4000px;} that contains one   character. Make sure this element has the same text styling as the your contentEditable div. The width of this element should be the width of the space character (make sure you're not including any padding or borders etc.)

I've not tried this, but that's what I'd try first.

---

You may use "em" instead of "px". First googled link about "em": http://www.xs4all.nl/~sbpoley/webmatters/emex.html

Try such construction

<div style="position:absolute;top:300px;width:{count_of_letters}em; height:50px;background:red;color:black;word-wrap:break-word;">
    <div contenteditable=true>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        aaaaa
        bbbbbbbbbbb
    </div>

But better to forget this idea and use CSS rules from other comments in this topic.

---

Unicode defines fixed widths for a number of space characters. The following table from here is a summary of Unicode's specs (Unicode 14, p. 266):

Code	Name of the character	Width of the character
U+0020	SPACE	Depends on font, typically 1/4 em, often adjusted
U+00A0	NO-BREAK SPACE	As a space, but often not adjusted
U+1680	OGHAM SPACE MARK	Unspecified; usually not really a space but a dash
U+180E	MONGOLIAN VOWEL SEPARATOR	0
U+2000	EN QUAD	1 en (= 1/2 em)
U+2001	EM QUAD	1 em (nominally, the height of the font)
U+2002	EN SPACE (nut)	1 en (= 1/2 em)
U+2003	EM SPACE (mutton)	1 em
U+2004	THREE-PER-EM SPACE (thick space)	1/3 em
U+2005	FOUR-PER-EM SPACE (mid space)	1/4 em
U+2006	SIX-PER-EM SPACE	1/6 em
U+2007	FIGURE SPACE	“Tabular width”, the width of digits
U+2008	PUNCTUATION SPACE	The width of a period “.”
U+2009	THIN SPACE	1/5 em (or sometimes 1/6 em)
U+200A	HAIR SPACE	Narrower than THIN SPACE
U+200B	ZERO WIDTH SPACE	0
U+202F	NARROW NO-BREAK SPACE	Narrower than NO-BREAK SPACE (or SPACE), “typically the width of a thin space or a mid space”
U+205F	MEDIUM MATHEMATICAL SPACE	4/18 em
U+3000	IDEOGRAPHIC SPACE	The width of ideographic (CJK) characters.
U+FEFF	ZERO WIDTH NO-BREAK SPACE	0

Unfortunately the common space is not defined as having a fixed width. It depends not only on font size and explicit styling, but also on zoom level and system display scaling, among other things.

However, 0.25em will generally get you close. In pixels it would be 1/4 the font height; but you'd be better off using calc() if you are trying to fit em units to px dimensions, or just use em.

Alternatively, consider styling strategies that don't require you to know how wide a space is. For the OP's goal of "fill all of the space in the div", for example, the width and height of the parent div could be set to max-content, or the child div could be styled as white-space:nowrap.

Or, for example, gaps in flex layouts could be replaced with pseudo elements, e.g. here an element containing a space with white-space: pre can be inserted to create a correctly sized gap:

.explicit-gap { 
  gap: 0.25em; 
}

.implicit-space > :not(:first-child):before {
  content: ' ';
  white-space: pre;
}

div { display: flex; }

/* just some labels, nothing interesting down here */
.explicit-gap:after { content: "(using 'gap')" }
.implicit-space:after { content: "(using ':before')" }
.no-styling:after { content: "(no gap set)" }
.control:after { content: "(actual spaces)" }
div:after { position: absolute; left: 25ex; opacity:.5; }

<div class="explicit-gap">
  <span>Here</span>
  <span>are</span>
  <span>some</span>
  <span>words</span>
</div>

<div class="implicit-space">
  <span>Here</span>
  <span>are</span>
  <span>some</span>
  <span>words</span>
</div>

<div class="no-styling">
  <span>Here</span>
  <span>are</span>
  <span>some</span>
  <span>words</span>
</div>

<div class="control">
  <span>Here are some words</span>
</div>

Etc.