增加img和href元素內部文本之間的空格（word spacing ?. padding？）

我想弄清楚如何在文本和圖像之間創建一個空格。我已經嘗試了迄今爲止學到的所有內容，包括字間距，填充。增加img和href元素內部文本之間的空格（word spacing ?. padding？）

讓我告訴你圖片，這會讓你更好地理解我想達到的目標。我想增加圖像和文本之間的空間。突出顯示爲黃色。如何使用此示例代碼實現它？ Link to CodePen

HTML

<div class="navbar-header"> 
    <div class="container"> 
    <div id="logo"> 
     <a href="#"> 
     Amazing <img src="http://www.clipartkid.com/images/650/image-spiderman-logo-png-spider-man-wiki-wikia-hYo1XM-clipart.png"/> Spiderman 
     </a> 
    </div> 
    </div> 
</div>

CSS

.navbar-header { 
    border-bottom: 1px solid black; 
    height: 70px; 
    margin-bottom: 0; 
    position: fixed; 
    width: 100%; 
    z-index: 100; 
} 

.container { 
    align-items: center; 
    display: flex; 
    flex-direction: row; 
    height: 100%; 
    width: 100%; 
} 

#logo { 
    align-items: center; 
    margin: auto; 
} 

#logo a { 
    align-items: center; 
    color: black; 
    display: flex; 
    flex-grow: 2; 
    margin: auto; 
    text-decoration: none; 
    word-spacing: 200px; 
} 

#logo img { 
    height: 66px; 
    margin: auto; 
}

來源

2016-10-15 xeho91

您是否嘗試過' '而不是使用圖像前後的空格？ –

不，從來沒有聽說過它。但我看到它正在工作。我可以使用字間距控制它的空間寬度，對吧？ – xeho91

我認爲給IMG一個左/右邊距應該是最好的解決方案。最簡單的方法來實現這一點：

#logo img { 
    height: 66px; 
    margin: auto 20px; 
}

來源

2016-10-15 20:05:19

如果我明白你的問題.....我只想補充左，右頁邊距的有關#logo IMG你想要的空間

#logo img { 
    height: 66px; 
    margin: auto; 
    /*you would want to change this, so as to not have both declarations, I just dont know how much top and bottom margin you want*/ 
    margin-left: 15px; 
    margin-right: 15px 
}

來源

2016-10-15 20:04:20 pasquers

增加img和href元素內部文本之間的空格（word spacing ?. padding？）

回答

相關問題