CODEWITHSUNDEEP
htmlcss
Solace
Solace

Reputation: 9020

How to apply padding to an HTML input element?

In the HTML layout shown in the following screenshot, I want the radio buttons exactly under the Yes and No labels, but the CSS padding property does not seem to apply to the HTML input tag. The code is given.

How can I change the inline style so that the radio buttons are under the Yes and No labels.

JSFiddle here.

enter image description here

<html>
    <div style="padding:25px;">
        <div style="background-color:#bf5b5b; ">
            <label style="padding-left:25px; padding-right:25px;">Yes</label>
            <label style="padding-left:25px; padding-right:25px;">No</label>
            <label style="padding-left:25px; padding-right:25px;"></label>
        </div>
        <div id="option_one_div" style="background-color:#74d4dd;">
            <input style="padding-left:125px; padding-right:25px;" type="radio" name="radio" value="0">
            <input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">
            <label style="padding-left:25px; padding-right:25px;" for="option_one_div">Label of first group of Radio Buttons</label>
        </div>
        <div id="option_two_div" style="background-color:#36d666;">
            <input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="0">
            <input style="padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">
            <label style="padding-left:25px; padding-right:25px;" for="option_two_div">Label of second group of Radio Buttons</label>
        </div>
    </div>
</html>

Upvotes: 1

Views: 9074

Answers (5)

Nerixel
Nerixel

Reputation: 427

The idea of padding is that it adds space within the element. You appear to be trying to add space outside the element, for which you should be using margin.

This image may help to explain the concept.

box model example
(source: w3schools.com)

The point is, to add space around an element you'd normally use margin rather than padding.
On a side note, a lot of people make this mistake when adding padding to the body; they use margin instead and it yields unpredictable results).

Here's an example fiddle using your code, just with margin instead of padding (I modified the pixels to make it work properly).

Upvotes: 5

user3930058
user3930058

Reputation: 23

Hi why not just do this:

<html>
    <div>
        <div style="background-color:#bf5b5b; width:100%; float:left;">
            <label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
            <label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
            <label style="width:60%;">Label of first group of Radio Buttons</label>
        </div>
        <div style="background-color:#74d4dd; width:100%;  float:left;">
            <label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
            <label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
            <label style="width:60%;">Label of teo group of Radio Buttons</label>
        </div>
        <div style="background-color:#36d666; width:100%;  float:left;">
            <label style="width:15%; padding-left:3%">Yes<input type="radio" name="radio" value="0"></label>
            <label style="width:15%;">No<input type="radio" name="radio" value="0"></label>
            <label style="width:60%;">Label of three group of Radio Buttons</label>
        </div>
    </div>
</html>

Then just add some @ media css classes to make it full mobile responsive and stack-able too.

This will offer much more to you prospective site users as they can view it from their mobile devices with as much ease as they can from a pc.

Upvotes: 0

Candlejack
Candlejack

Reputation: 445

Here's my Fiddle

<input style="margin-left: 5%; padding-left:25px; padding-right:25px;" type="radio" name="radio" value="0">
<input style="margin-left: 7.5%; padding-left:25px; padding-right:25px;" type="radio" name="radio" value="1">

I used margin-left with percentage values. It looks like what you described you wanted - you can always replace percentage with pixel values if needed.

Upvotes: 1

Ankit Bajpai
Ankit Bajpai

Reputation: 13527

In your 2nd div i.e. 

<div id="option_one_div" style="background-color:#74d4dd;">

the

<input style="padding-left:125px; padding-right:25px;" type="radio" name="radio" value="0">

here padding-left has 125 px. change it to 25 px your prob will be solved.

Upvotes: 0

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Put span tag around input tags with left-padding:

Here is the JSFiddle

Upvotes: 3

Related Questions