How to Get Size of Check and Gap in Check Box

How to get size of check and gap in check box?

I'm pretty sure the width of the checkbox is equal to

int x = GetSystemMetrics( SM_CXMENUCHECK );
int y = GetSystemMetrics( SM_CYMENUCHECK );

You can then work out the area inside by subtracting the following ...

   int xInner = GetSystemMetrics( SM_CXEDGE );
   int yInner = GetSystemMetrics( SM_CYEDGE );

I use that in my code and haven't had a problem thus far ...

Get the size of checkbox

The function that you need, as I understand it is GetThemePartSize. You need to supply BP_CHECKBOX for the part, and whichever of the states is appropriate.

Spacing between checkboxes and values

Use This Code

.checkboxes {
  text-align:center;
}

.checkboxes input{
  margin: 0px 0px 0px 0px;
}

.checkboxes label{
  margin: 0px 20px 0px 3px;
}

<html>
  <head></head>

  <body>
    <div class="checkboxes">
    <span>
      <input type="checkbox" name="Mow" value="Mow"> <label>One</label>
      <input type="checkbox" name="Weedeat" value="Weedeat"> <label>Two</label>
      <input type="checkbox" name="Edge" value="Edge"> <label>Three</label>
      <input type="checkbox" name="Other" value="Other"> <label>Four</label>
    </span>
    </div>
  </body>

</html>

Add gap between outer and inner border of checkbox

There are many ways how to do it, for example

input[type='checkbox'] {width: 18px; height: 18px; border: 1px solid #ccc; position: relative; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: text-bottom;}
input[type='checkbox']:before {content: ''; position: absolute; top: 2px; left: 2px; background: #ccc; width: 12px; height: 12px;}

input[type='checkbox']:checked {border-color: blue}
input[type='checkbox']:checked:before {background: blue}

<label>
    <input type="checkbox">
    Checkbox 1
</label>
<label>
    <input type="checkbox">
    Checkbox 2
</label>

How to Evenly Space Checkboxes, Even When Page is Resized

sorry if this is answer is late but maybe this can still help you. Looking at the JFiddle link you provided here: Your JFiddle, the reason this is not working is because you have set the height of your labels to a fixed height of 14px (to work with the checkbox feature you implemented). You correctly set justify-content: space-around to do what you described, but if the content is always 14px regardless of how many lines it spans, then the space will remain the same no matter what. Since your checkbox feature requires this 14px height, you should instead apply this checkbox feature to a div nested inside the label, with the accompanying text outside this div, but still inside the label. Here is a JFiddle with the code I implemented to get this working.

The main HTML change is this:

<label for="checkboxG4" class="radGroup1">
  <div class="css-label"></div>
  <span>News, Commentary, Research & Special Reports</span>
</label>

instead of:

<label for="checkboxG4" class="css-label radGroup1">
  <p>News, Commentary, Research & Special Reports</p>
</label>

and CSS changed to:

input[type=checkbox].css-checkbox + label div.css-label,
input[type=checkbox].css-checkbox + label div.css-label.clr {}
label div.css-label {}

instead of:

input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr {}
label.css-label {}

Android - Spacing between CheckBox and text

I hate to answer my own question, but in this case I think I need to. After checking it out, @Falmarri was on the right track with his answer. The problem is that Android's CheckBox control already uses the android:paddingLeft property to get the text where it is.

The red line shows the paddingLeft offset value of the entire CheckBox

alt text

If I just override that padding in my XML layout, it messes up the layout. Here's what setting paddingLeft="0" does:

alt text

Turns out you can't fix this in XML. You have do it in code. Here's my snippet with a hardcoded padding increase of 10dp.

final float scale = this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),
        checkBox.getPaddingTop(),
        checkBox.getPaddingRight(),
        checkBox.getPaddingBottom());

This gives you the following, where the green line is the increase in padding. This is safer than hardcoding a value, since different devices could use different drawables for the checkbox.

alt text

UPDATE - As people have recently mentioned in answers below, this behavior has apparently changed in Jelly Bean (4.2). Your app will need to check which version its running on, and use the appropriate method.

For 4.3+ it is simply setting padding_left. See htafoya's answer for details.

MFC CheckBox - retrieve accurate square size

You can use GetThemePartSize function.

And some code :

HTHEME hTheme = ::OpenThemeData(hwnd, L"button");
SIZE szCheckBox;
HRESULT hr = GetThemePartSize(hTheme, NULL, BP_CHECKBOX, CBS_UNCHECKEDNORMAL, NULL, TS_TRUE, &szCheckBox);

Edit:

Answer related: Determine checkbox square size [MFC]

space between text and checkbox

<asp:CheckBox ID="chkPublic" runat="server" Text="Public" Font-Bold="true" CssClass="mycheckbox" />

In stylesheet.css

.mycheckbox input[type="checkbox"] 
{ 
    margin-right: 5px; 
}

How to Get Size of Check and Gap in Check Box