+ 1

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

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??

3rd Jul 2017, 10:05 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
21 ответ
+ 4
agree with visph
3rd Jul 2017, 10:26 AM
Akash
Akash - avatar
+ 3
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>
3rd Jul 2017, 10:12 AM
Akash
Akash - avatar
+ 3
if you want to add padding for only separate images use margin instead of padding
3rd Jul 2017, 10:20 AM
Akash
Akash - avatar
+ 3
Simply use 'margin' instead 'padding' ^^ not else... ;)
3rd Jul 2017, 10:22 AM
visph
visph - avatar
+ 3
No, use 'margin' instead of 'padding' in your css, without adding <div> containers :P
3rd Jul 2017, 10:24 AM
visph
visph - avatar
+ 3
Padding is the margin between border and content, margin is about external margin (between border and other elements)
3rd Jul 2017, 10:26 AM
visph
visph - avatar
+ 1
???
3rd Jul 2017, 10:03 AM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
+ 1
nice visph and akash... thx it worked
3rd Jul 2017, 10:26 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
check description
3rd Jul 2017, 10:06 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
show your code
3rd Jul 2017, 10:07 AM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
0
img{ display:block; clear:right; float:right; } #imgb{ padding:75 0 0 0; border:1px solid white; } #imga{ padding:40 0 0 0; }
3rd Jul 2017, 10:10 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
OK lemme try
3rd Jul 2017, 10:13 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
didn't work
3rd Jul 2017, 10:18 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
make your code public
3rd Jul 2017, 10:19 AM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
0
<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
3rd Jul 2017, 10:20 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
ok lemme try
3rd Jul 2017, 10:21 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
#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>
3rd Jul 2017, 10:23 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
ok
3rd Jul 2017, 10:25 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
thanks it's okay now
3rd Jul 2017, 10:27 AM
Ricardo Chitagu
Ricardo Chitagu - avatar
0
Add boz-sizing: border-box; would solve the issue.
3rd Jul 2017, 10:49 AM
Calviղ
Calviղ - avatar