All geek questions in one place

Adding space between buttons?

Hi, I have a code that fits perfectly except one. There is no space between each button in the code. I tried margin, but unfortunately its unordered list, so I'm a bit confused. What would I add or replace to take place between the two buttons. Help ??: (

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <style type="text/css"> .rollovericons a#terms{ display: block; width:138px; height:27px; background: url(http://icpy.webs.com/button/Terms.png) no-repeat; } .rollovericons a:hover#terms{ background: url(http://icpy.webs.com/button/Terms0.png) no-repeat; } .rollovericons a#contact{ display: block; width:138px; height:27px; background: url(http://icpy.webs.com/button/contact.png) no-repeat; } .rollovericons a:hover#contact{ background: url(http://icpy.webs.com/button/contact0.png) no-repeat; } </style> <body> <div class="rollovericons"> <a href="http://www.twitter.com" id="terms"></a> <a href="http://www.twitter.com" id="contact"></a> </div> </body>
+4
source share
3 answers

Just do:

 .rollovericons a{ margin: 10px; }

This will add margin to each <a> element within the rollovericons class.

+13
source

I added a class called space that will add a space between the buttons.

Here's a jsfiddle for you: http://jsfiddle.net/mFfAX/

 .space {margin-bottom:15px}
+1
source

Try the following:

 .rollovericons ul li { display: inline; list-style-type: none; padding-right: 7px; } <div class="rollovericons"> <ul> <li><a href="http://www.twitter.com" id="terms"></a></li> <li><a href="http://www.twitter.com" id="contact"></a></li> </ul> </div>
0
source

Source: https://habr.com/ru/post/1491342/

More articles:


All Articles