html - 間のスペースを削除

Question

この Web サイトテンプレート ( http://andreasviklund.com/dt_portfolio/this-is-me-dark/ ) に2 つの Skype ボタン ( https://dev.skype.com/skype-uri/generator ) を追加しました。次の HTML コード:

    <li id="contact" class="section">
        <h2>Contact</h2>
        <div id="address">
            <h3>Your Name</h3>
            <p>Street Name XX,<br />
            Floor YY,<br />
            City Name, Country</p>
            <p>Telephone: +123 000 000<br />
            Mobile: +123 000 000<br />
            E-mail: <a href="#">youraddress@yourserver.com</a></p>
            <script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>
            <div id="genSkypeCall_01">
                <script type="text/javascript">
                    Skype.ui({
                        name: "call",
                        element: "genSkypeCall_01",
                        participants: ["yourSkypeName"],
                        imageSize: 32,
                        imageColor: "skype"
                    });
                </script>
            </div>
            <div id="genSkypeCall_02">
                <script type="text/javascript">
                    Skype.ui({
                        name: "chat",
                        element: "genSkypeCall_02",
                        participants: ["yourSkypeName"],
                        imageSize: 32,
                        imageColor: "skype"
                    });
                </script>
            </div>
        </div>
        <div id="map">
            <img alt="Sample map" src="http://maps.googleapis.com/maps/api/staticmap?center=59.32463,18.073583&amp;zoom=11&amp;size=305x200&amp;sensor=false&amp;markers=color:red%7C59.32463,18.073583" />           
        </div>
    </li>

CSS コードは次のとおりです (私は変更していません)。

/*
Original design: This is me (dark) (v1.2 - Sep 12, 2012) - A free xhtml/css website template for andreasviklund.com.
For more information, see http://andreasviklund.com/templates/this-is-me-dark/

Includes:
jQuery from http://jquery.org/
Poptrox jQuery plugin by nodethirtythree: http://www.nodethirtythree.com/jquery_plugins.html
jQuery.ScrollTo and jQuery.LocalScroll by Ariel Flesler: http://flesler.blogspot.com/
Icons fom http://www.komodomedia.com/
*/

*{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;}
body{background-color:#fafafa;color:#646464;font:12px/16px Cabin, Helvetica, Arial, sans-serif;}
ol,ul{list-style:none;list-style-image:none;list-style-position:outside;list-style-type:none;}
a img{border:none;}
a{color:#000;text-decoration:none;}
a:hover,a:focus{color:#666;text-decoration:underline;}
p{font-family:Cabin, sans-serif;padding:0 2px 10px;}
h2{color:#333;font:22px Cabin, sans-serif;padding:6px 0 10px;}
.left{float:left;margin:0 15px 5px 0;}
.right{float:right;margin:0 0 5px 15px;}

#mainwrap{margin:0 auto;overflow:hidden;position:relative;width:640px;}
#cardstyle{background-color:#fff;border:1px solid #d4d4d4;height:300px;margin:125px auto 20px;overflow:hidden;padding:6px;position:relative;width:600px;}
#content{background-color:#fafafa;height:300px;overflow:hidden;position:relative;width:600px;}
#pagecontainer{position:relative;width:9999px;}
.section{float:left;height:275px;margin-right:50px;padding:0 10px 25px;position:relative;width:568px;}

#menuwrap{margin:0 auto;}
#iconmenu{bottom:0;clear:both;height:22px;left:180px;overflow:hidden;padding:8px 0 6px 10px;position:absolute;text-align:center;width:auto;z-index:100;}
#iconmenu li{display:block;float:left;}
#iconmenu li a{display:block;float:left;opacity:0.4}
#iconmenu li img{padding:0 10px;}
#iconmenu li a.selected,#iconmenu li a:hover,#iconmenu li a:focus{opacity:1;}

#start{height:188px;padding:80px 15px 30px;}
#start h1{color:#2e6dd1;font:normal 90px Allura, Helvetica;line-height:0.9em;margin:0;padding:10px 0;text-align:center;text-shadow:0 1px 0 #fff;}
p.tagline{color:#666;font-size:16px;text-align:center;}

#bio img{border:3px solid #fff;box-shadow:1px 1px 0px #aaa;}

.poptroxactive{list-style:none;margin:0 auto;padding:0;width:100%;}
.poptroxactive li{float:left;height:110px;margin:0 30px 8px 0;}
.poptroxactive li img{border:3px solid #fff;box-shadow:1px 1px 0px #aaa;cursor:pointer;width:100px;}
.poptrox_popup{background:#fff;border-radius:12px;box-shadow:0px 0px 50px #111;padding:1em 1em 3em;position:relative;}
.poptrox_popup .loader{background:url('images/loader.gif') top center no-repeat;border-radius:8px;display:block;margin:55px 0 0;text-indent:-9999em;}
.poptrox_popup .caption{bottom:1em;left:1em;position:absolute;}
.poptrox_popup .closer{bottom:1em;position:absolute;right:1em;}

#social ul{padding:2px 0;}
#social li{display:block;float:left;height:46px;margin:0 14px 12px 0;overflow:hidden;width:252px;}
#social li a{color:#666;display:block;float:left;height:32px;overflow:hidden;padding:0 0 3px;width:252px;}
#social li a:hover,#social li a:focus{color:#333;text-decoration:none;}
#social img{float:left;margin:0 16px 0 10px;}
#social strong{color:#333;display:block;font-size:14px;font-weight:700;}

#address{border-right:1px solid #ddd;float:left;margin-right:20px;padding:0 0 0 1px;width:240px;}
#address h3{color:#333;font-size:14px;font-weight:700;padding:6px 2px 0;}

#footer{color:#999;text-align:center;width:100%;}
#footer a{color:#999;}

/* If you want to add styles for the custom page, you can do it by using the ID #custom, like this:
#custom h2{color:blue;}
#custom p{text-align:center;}
*/

/* Custom styles for inverting the default color scheme. See 
http://andreasviklund.com/learn/this-is-me-template-with-inverted-colorscheme/
for more information. */

body.inverted {background-color:#1a1a1a;color:#e0e0e0;}
body.inverted #cardstyle {background-color:#101010;border:1px solid #2a2a2a;}
body.inverted #content {background-color:#181818;}
body.inverted h2 {color:#eee;}
body.inverted #start h1 {color:#ddd;text-shadow:0 1px 0 #111;}
body.inverted #bio img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
body.inverted .poptroxactive li img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
body.inverted .poptrox_popup{background-color:#222;}
body.inverted #social li a {color:#ddd;}
body.inverted #social strong {color:#eee;}
body.inverted #address h3 {color:#eee;}
body.inverted #address {border:0;}
body.inverted #footer, body.inverted #footer a {color:#777;}
body.inverted a {color:#ddd;}

タイトルが示すように、私の問題は、テキストのブロックと最初のSkypeボタン「通話」の間、およびこれと2番目のボタン「チャット」の間の両方に大きなギャップが残っていることです（これにより、このボタンが画面の下に消えます） .

私は HTML の初心者なので、これらのスペースの設定方法についてアドバイスをお願いしたいと思います。

ご清聴ありがとうございました。

score 4 · Accepted Answer

スタイルシートの最後に次のスタイルを追加することで、機能するようになりました。

p#genSkypeCall_01_paraElement a img, p#genSkypeCall_02_paraElement a img {
    margin:0 !important;
    vertical-align:0 !important
}
div#genSkypeCall_02, div#genSkypeCall_01 {
    display:inline-block;
}

ここで私の CSSを使用して申し訳!importantありませんが、問題の原因となったコードは Skype JavaScript によって作成されたインラインコードであり、オーバーライドする必要がありました。

ここでチェックしてください：http://jsfiddle.net/LHEKd/01

score 0 · Accepted Answer

私はこれと戦ってきました.ProbibilityWolfの答えにいくつかの変更を加える必要がありました.

これは私のバージョンです：

call_r_paraElement は、私の JavaScript コードによって生成された p の名前です。

#call_r_paraElement { margin:0px !important;display:inline;  }
#call_r_paraElement a img, #call_r_paraElement a img {
    margin:0 !important;
    vertical-align:0 !important;    
}

html - 間のスペースを削除

2 に答える 2

call_r_paraElement は、私の JavaScript コードによって生成された p の名前です。

Related

Reference