How do I use styles?

Get Started
1

Inside a <DIV > I have a text and two check boxes.

i.e

Africa

<input type=“checkbox” name=“strCustTerr1” value=“” align=“middle” />

<input type=“checkbox” name=“strCustTerr2” value=“” align=“middle” />

I want gap between Africa and checkbox1 as 25px and then gap between checkbox1 to checkbox2 as 50px.

How do I do this using styles ?

2

Inside a <DIV > I have a text and two check boxes.

i.e

Africa

<input type=“checkbox” name=“strCustTerr1” value=“” align=“middle” />

<input type=“checkbox” name=“strCustTerr2” value=“” align=“middle” />

I want gap between Africa and checkbox1 as 25px and then gap between checkbox1 to checkbox2 as 50px.

How do I do this using styles ?

3

Here is one way to do this:



<div style='line-height:25px'>
	Africa 
	<br />
	<input type="checkbox" name="strCustTerr1" value="" align="middle" />	
	<br />
	<br />
	<input type="checkbox" name="strCustTerr2" value="" align="middle" />	
</div>

.

4

You could set a class on the first checkbox and then give that a left and right margin :). OBVIOUSLY choose a better class name :slight_smile:

<input type="checkbox" name="strCustTerr1" value="" align="middle" class="thingy" />
... 
.thingy{margin:0 50px 0 25px;}/*top right bottom left*/
5

NO. that does not work.

I want gap between Africa and checkbox1 as 25px and then gap between checkbox1 to checkbox2 as 50px.

25px and 50px are just demo numbers . that could be some other numbers in my page in the final look.

This what I want. You are using style in <div> which I don’t need.

Can you please modify the code so that it gets the desired effect ?

Thanks

6

I want a relative gap.

I tried this way…



<div>
       <span>Africa</span>
       <input type="checkbox" name="strCustTerr1" value="" style="margin-left:200px" />	
       <input type="checkbox" name="strCustTerr2" value="" style="margin-left:205px" />	
	   <input type="checkbox" name="strCustTerr3" value="" style="margin-left:300px" />	
    </div>

checkbox1 and checkbox2 are differed by only 5px but in the display they are far apart! how to fix this ?

I can’t control the gap between checkboxes.

I want to put gaps between checkboxes . thats my goal.

7

I did not realise that you wanted a horizontal gap and not a vertical gap.

Here we go - try this link:

http://w3schools.com/css/tryit.asp?filename=trycss_text_word-spacing

To get the additional double space then add  

.

8

Tutorial is for word spacing

but I am having checkboxes …Can I still treat them for word-spacing ? also they are using word-spacing:30px; fixed …but I want relative varied spacing

9

Tried one more way …


  <div>
       <span>Africa</span>
       <input type="checkbox" name="strCustTerr1" value="" style="margin-left:200px" />	
       <input type="checkbox" name="strCustTerr2" value="" style="margin-left:205px" />	
	   
    </div>

See they are differed by only 5px …but in the display they are so far apart !

why so big gaping coming up whenever the difference is only 5px ?

10

in your second checkbox code just replace 205px with 5px


<input type="checkbox" name="strCustTerr2" value="" style="margin-left:5px" />

because if you write 205px, then 205px will be calculated after first checkbox.

vineet

11

Try this and ignore the styling for the div.



 <div style='width:88&#37;; text-align:left;border:dotted;margin:3em auto'> 
       <span>Africa</span> 
       <input type="checkbox" name="strCustTerr1" value="" style="display:inline-block; width:0px;" />     
       <input type="checkbox" name="strCustTerr2" value="" style="display:inline-block; width:50px;" />     
       <input type="checkbox" name="strCustTerr1" value="" style="width:100px;" />     
       <input type="checkbox" name="strCustTerr2" value="" style="width:50px;" />     
</div>

The checkboxés are inline components and may work without the display-block but I think best to include them so it works in every browser.

.

12

This is actually one of those times it may be easier to use a table.

By the sounds of it you need to improve your CSS skills before you take this one on with CSS.

13

See they are differed by only 5px …but in the display they are so far apart !

This sentences makes me wonder if you think that everyone’s left margin is starting from the left side of the div. What you saw was what you wrote: 205px of left-space before the second box, as Vineet said:

If you draw what you want, or if we can see it, then we can write decent code examples for you.

BTW I am very against using &nbsp or multiple br’s for spacing in code. That is so not HTML’s job. That’s CSS’ job, unless you are making this for an HTML email.

14

Oh wait, Poes you mean this? -


</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

Or this? -

display:block;
15

Is this something that your looking for?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0; }
 
p { padding-left: 40px; }
 
#container_example {
    width: 100px;
    margin: 0 auto; }
 
#form_1 { margin: 25px 0 0 50px; }
 
#form_2 { margin: 50px; }
 


</style>
</head>
<body>
<div id="container_example">

            <p>
                Africa
            </p><input type="checkbox" name="checkedbox" value="" id="form_1" /><input type="checkbox" name="checkedbox" value="" id="form_2" />
        </div>

</body>
</html>