Hi coders....ive got two images separated by padding the way i want.I put a border around them.Whats happening now is that the b

Question

Hi coders....ive got two images separated by padding the way i want.I put a border around them.Whats happening now is that the border is wrapping around the padding box instead of content.how do i wrap around content without removing padding??

Answer 1

agree with visph

Answer 2

make a div and add padding on it and place the image in the div with border

<div style="padding:3px;">
<img src="#"style ="border:1px solid black( as you want)"/>
</div>

<div style="padding:3px;">
<img src="#" style ="border:1px solid black( as you want)"/>
</div>

Answer 3

if you want to add padding for only separate images
use margin instead of padding

Answer 4

Simply use 'margin' instead 'padding' ^^ not else... ;)

Answer 5

No, use 'margin' instead of 'padding' in your css, without adding <div> containers :P

Answer 6

Padding is the margin between border and content, margin is about external margin (between border and other elements)

Answer 7

???

Answer 8

nice visph and akash... thx it worked

Answer 9

check description

Answer 10

show your code

Answer 11

img{
display:block;
clear:right;
float:right;

}

#imgb{

padding:75 0 0 0;
border:1px solid white;
}

#imga{
padding:40 0 0 0;
}

Answer 12

OK lemme try

Answer 13

didn't work

Answer 14

make your code public

Answer 15

<section>

<img display="block";>

<div style="padding:40 0 0 0;">
<img id="imga" style="border:1px solid white" align="right" src="back2.jpg" height="350" width="400px";>
</div>

<div style="padding:75 0 0 0;" >
<img id="imgb" style="border:1px solid white" align="right" src="back3.jpg" height="350" width="400px";>
</div>

</img>

#This is what i did ....still the same

Answer 16

ok lemme try

Answer 17

#with margin still the same

<section>

<img display="block";>

<div style="margin:40 0 0 0;">
<img id="imga" style="border:1px solid white" align="right" src="back2.jpg" height="350" width="400px";>
</div>

<div style="margin:75 0 0 0;" >
<img id="imgb" style="border:1px solid white" align="right" src="back3.jpg" height="350" width="400px";>
</div>

</img>

Answer 18

ok

Answer 19

thanks it's okay now

Answer 20

Add
boz-sizing: border-box;

would solve the issue.