【问题标题】:Why do I have white spacing around my positioned nav?为什么我的定位导航周围有空白间距?
【发布时间】:2017-08-26 03:57:46
【问题描述】:

这是一个菜鸟问题,但是,为什么我的定位导航周围有白色间距?我为移动设备创建了一个显示在底部的导航,并且我的导航元素中有看起来像顶部和底部填充的东西,但是当我打开开发工具时,没有填充或任何我认为会导致此问题的东西,它是什么以及如何删除它?

https://jsfiddle.net/7am3d06L/

<html>
    <head>
        <title>Somalia</title>
        <meta charset="utf-8">
        <meta name="keywords" content="css, html, test">
        <meta name="description" content="This is an html and css review">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>     
            *{
                text-align: center;
            }
            h1,nav{
                font-family: arial;
            }
            #headerNav{
                display: none;
            }
            #footerNav{
                position: fixed;
                bottom: 0px;
                width: 100%;
                background-color: white;
                padding: 0;
            }
            nav ul{
                padding: 0;
            }
            nav li{
                list-style-type: none;
                border: 1px solid black;
                margin: 0;
            }

            nav a{
                text-decoration: none;
                font-weight: 700;
            }

            nav a, nav a:visited {
                color: green;
            }

        </style>
    </head>
    <body>
        <header>
            <h1>Somalia</h1>
            <nav id="headerNav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="historyAndPolitics.html">History And Politics</a></li>
                    <li><a href="Geography">Geography</a></li>
                    <li><a href="economy.html">Economy</a></li>
                    <li><a href="cultureAndDemographics.html">Culture And Demographics</a></li>
                </ul>
            </nav>
        </header>
        <article>
        <p>
        Somalia (/səˈmɑːliə, soʊ-, -ljə/ so-mah-lee-ə; Somali: Soomaaliya; Arabic: الصومال‎‎ aṣ-Ṣūmāl), 
        officially the Federal Republic of Somalia[1] (Somali: Jamhuuriyadda Federaalka Soomaaliya, Arabic: 
        <bdi>جمهورية الصومال الفيدرالية</bdi>‎‎ Jumhūrīyat aṣ-Ṣūmāl al-Fidirālīyah), is a country located in the
        Horn of Africa. It is bordered by Ethiopia to the west, Djibouti to the northwest, the Gulf of Aden to the
        north, the Indian Ocean to the east, and Kenya to the southwest. Somalia has the longest coastline on 
        Africa's mainland, and its terrain consists mainly of plateaus, plains and highlands. Climatically, hot 
        conditions prevail year-round, with periodic monsoon winds and irregular rainfall.
        </p>
        <p>Somalia has an estimated population of around 12.3 million. Around 85% of its residents are ethnic 
        Somalis,[3] who have historically inhabited the northern part of the country. Ethnic minorities are largely
        concentrated in the southern regions. The official languages of Somalia are Somali and Arabic, both of 
        which belong to the Afroasiatic family. Most people in the country are Muslim, with the majority being Sunni.
        </p>

        <p>In antiquity, Somalia was an important commercial centre. It is among the most probable locations of the
        fabled ancient Land of Punt. During the Middle Ages, several powerful Somali empires dominated the regional
        trade, including the Ajuran Empire, the Adal Sultanate, the Warsangali Sultanate, and the Geledi Sultanate.
        In the late 19th century, through a succession of treaties with these kingdoms, the British and Italian 
        empires gained control of parts of the coast and established the colonies of British Somaliland and Italian
        Somaliland.[19][20] In the interior, Mohammed Abdullah Hassan's Dervish State repelled the British Empire 
        four times and forced it to retreat to the coastal region, before succumbing to defeat in 1920 by British 
        airpower.[22] The toponym Somalia was coined by the Italian explorer Luigi Robecchi Bricchetti (1855–1926).
        Italy acquired full control of the northeastern, central and southern parts of the area after successfully 
        waging the so-called Campaign of the Sultanates against the ruling Majeerteen Sultanate and Sultanate of
        Hobyo.[20] Italian occupation lasted until 1941, yielding to British military administration. British 
        Somaliland would remain a protectorate, while Italian Somaliland in 1949 became a United Nations 
        Trusteeship under Italian administration, the Trust Territory of Somaliland. In 1960, the two regions 
        united to form the independent Somali Republic under a civilian government.</p>

        <p>The Supreme Revolutionary Council seized power in 1969 and established the Somali Democratic Republic.
        Led by Mohamed Siad Barre, this government later collapsed in 1991 as the Somali Civil War broke out.
        Various armed factions began competing for influence in the power vacuum, particularly in the south.
        During this period, due to the absence of a central government, Somalia was a "failed state", and residents
        returned to customary and religious law in most regions. A few autonomous regions, including the 
        Somaliland and Puntland administrations emerged in the north. The early 2000s saw the creation of fledgling
        interim federal administrations. The Transitional National Government (TNG) was established in 2000, 
        followed by the formation of the Transitional Federal Government (TFG) in 2004, which reestablished
        national institutions such as the military. In 2006, the TFG, assisted by Ethiopian troops, 
        assumed control of most of the nation's southern conflict zones from the newly formed Islamic Courts Union
        (ICU). The ICU subsequently splintered into more radical groups such as Al-Shabaab, which battled the TFG 
        and its AMISOM allies for control of the region.</p>

        <p>By mid-2012, the insurgents had lost most of the territory that they had seized. In 2011–2012, a 
        political process providing benchmarks for the establishment of permanent democratic institutions was 
        launched. Within this administrative framework a new provisional constitution was passed in August 2012,
        which reformed Somalia as a federation.[29] Following the end of the TFG's interim mandate the same month, 
        the Federal Government of Somalia, the first permanent central government in the country since the start 
        of the civil war, was formed[30] and a period of reconstruction began in Mogadishu. Somalia has maintained 
        an informal economy, mainly based on livestock, remittances from Somalis working abroad, and 
        telecommunications</p>
        </article>
        <footer>
            <nav id="footerNav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="historyAndPolitics.html">History And Politics</a></li>
                    <li><a href="Geography">Geography</a></li>
                    <li><a href="economy.html">Economy</a></li>
                    <li><a href="cultureAndDemographics.html">Culture And Demographics</a></li>
                </ul>
            </nav>

        </footer>
    </body>
</html>

【问题讨论】:

    标签: css css-position padding


    【解决方案1】:

    *{
    					text-align: center;
    				}
    				h1,nav{
    					font-family: arial;
    				}
    				#headerNav{
    					display: none;
    				}
    				#footerNav{
    					position: fixed;
    					bottom: 0px;
    					width: 100%;
    					background-color: white;
    					padding: 0px;
    				}
    				nav ul{
    					padding: 0px;
              margin: 0px
    				}
    				nav li{
    					list-style-type: none;
    					border: 1px solid black;
    					margin: 0px;
    				}
    				
    				nav a{
    					text-decoration: none;
    					font-weight: 700;
    				}
    				
    				nav a, nav a:visited {
    					color: green;
    				}
    <header>
    			<h1>Somalia</h1>
    			<nav id="headerNav">
    				<ul>
    					<li><a href="index.html">Home</a></li>
    					<li><a href="historyAndPolitics.html">History And Politics</a></li>
    					<li><a href="Geography">Geography</a></li>
    					<li><a href="economy.html">Economy</a></li>
    					<li><a href="cultureAndDemographics.html">Culture And Demographics</a></li>
    				</ul>
    			</nav>
    		</header>
    		<article>
    		<p>
    		Somalia (/səˈmɑːliə, soʊ-, -ljə/ so-mah-lee-ə; Somali: Soomaaliya; Arabic: الصومال‎‎ aṣ-Ṣūmāl), 
    		officially the Federal Republic of Somalia[1] (Somali: Jamhuuriyadda Federaalka Soomaaliya, Arabic: 
    		<bdi>جمهورية الصومال الفيدرالية</bdi>‎‎ Jumhūrīyat aṣ-Ṣūmāl al-Fidirālīyah), is a country located in the
    		Horn of Africa. It is bordered by Ethiopia to the west, Djibouti to the northwest, the Gulf of Aden to the
    		north, the Indian Ocean to the east, and Kenya to the southwest. Somalia has the longest coastline on 
    		Africa's mainland, and its terrain consists mainly of plateaus, plains and highlands. Climatically, hot 
    		conditions prevail year-round, with periodic monsoon winds and irregular rainfall.
    		</p>
    		<p>Somalia has an estimated population of around 12.3 million. Around 85% of its residents are ethnic 
    		Somalis,[3] who have historically inhabited the northern part of the country. Ethnic minorities are largely
    		concentrated in the southern regions. The official languages of Somalia are Somali and Arabic, both of 
    		which belong to the Afroasiatic family. Most people in the country are Muslim, with the majority being Sunni.
    		</p>
    
    		<p>In antiquity, Somalia was an important commercial centre. It is among the most probable locations of the
    		fabled ancient Land of Punt. During the Middle Ages, several powerful Somali empires dominated the regional
    		trade, including the Ajuran Empire, the Adal Sultanate, the Warsangali Sultanate, and the Geledi Sultanate.
    		In the late 19th century, through a succession of treaties with these kingdoms, the British and Italian 
    		empires gained control of parts of the coast and established the colonies of British Somaliland and Italian
    		Somaliland.[19][20] In the interior, Mohammed Abdullah Hassan's Dervish State repelled the British Empire 
    		four times and forced it to retreat to the coastal region, before succumbing to defeat in 1920 by British 
    		airpower.[22] The toponym Somalia was coined by the Italian explorer Luigi Robecchi Bricchetti (1855–1926).
    		Italy acquired full control of the northeastern, central and southern parts of the area after successfully 
    		waging the so-called Campaign of the Sultanates against the ruling Majeerteen Sultanate and Sultanate of
    		Hobyo.[20] Italian occupation lasted until 1941, yielding to British military administration. British 
    		Somaliland would remain a protectorate, while Italian Somaliland in 1949 became a United Nations 
    		Trusteeship under Italian administration, the Trust Territory of Somaliland. In 1960, the two regions 
    		united to form the independent Somali Republic under a civilian government.</p>
    
    		<p>The Supreme Revolutionary Council seized power in 1969 and established the Somali Democratic Republic.
    		Led by Mohamed Siad Barre, this government later collapsed in 1991 as the Somali Civil War broke out.
    		Various armed factions began competing for influence in the power vacuum, particularly in the south.
    		During this period, due to the absence of a central government, Somalia was a "failed state", and residents
    		returned to customary and religious law in most regions. A few autonomous regions, including the 
    		Somaliland and Puntland administrations emerged in the north. The early 2000s saw the creation of fledgling
    		interim federal administrations. The Transitional National Government (TNG) was established in 2000, 
    		followed by the formation of the Transitional Federal Government (TFG) in 2004, which reestablished
    		national institutions such as the military. In 2006, the TFG, assisted by Ethiopian troops, 
    		assumed control of most of the nation's southern conflict zones from the newly formed Islamic Courts Union
    		(ICU). The ICU subsequently splintered into more radical groups such as Al-Shabaab, which battled the TFG 
    		and its AMISOM allies for control of the region.</p>
    
    		<p>By mid-2012, the insurgents had lost most of the territory that they had seized. In 2011–2012, a 
    		political process providing benchmarks for the establishment of permanent democratic institutions was 
    		launched. Within this administrative framework a new provisional constitution was passed in August 2012,
    		which reformed Somalia as a federation.[29] Following the end of the TFG's interim mandate the same month, 
    		the Federal Government of Somalia, the first permanent central government in the country since the start 
    		of the civil war, was formed[30] and a period of reconstruction began in Mogadishu. Somalia has maintained 
    		an informal economy, mainly based on livestock, remittances from Somalis working abroad, and 
    		telecommunications</p>
    		</article>
    		<footer>
    			<nav id="footerNav">
    				<ul>
    					<li><a href="index.html">Home</a></li>
    					<li><a href="historyAndPolitics.html">History And Politics</a></li>
    					<li><a href="Geography">Geography</a></li>
    					<li><a href="economy.html">Economy</a></li>
    					<li><a href="cultureAndDemographics.html">Culture And Demographics</a></li>
    				</ul>
    			</nav>
    
    		</footer

    【讨论】:

      【解决方案2】:

      您重置了padding,但您还需要重置margin

      nav ul{
          padding: 0;
          margin: 0;
      }
      

      example

      【讨论】:

      • 一个男人打了我一拳。原因是 ul 上的边距 > 0。
      • Valar morghulis
      • 谢谢,我没有意识到边距可以有颜色,我认为这只是将元素分开的清晰空间。
      • @alexis 实际上你是对的。它只是推动元素的空白空间,但在您的情况下,它推动具有白色背景的#footerNav
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-12-11
      • 2019-10-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-05-10
      相关资源
      最近更新 更多