(上がcomponents-Myheader.vue,下がpages-about.vue)
これを表示するとaboutページに表示させたヘッダーの周りに余白ができてしまいます。
html/cssで同じように作ったときこの余白を解消するために
body{
margin:0;
}
をcssに追加したので、同じようにMyheader.vueファイルへこれを追加しましたが余白が解消されません。
何が原因でしょうか?
vue
1<template lang="html"> 2 <body> 3 <header class="header-container"> 4 <!-- topへのリンク --> 5 <nuxt-link 6 to="/" 7 class="menu" 8 > 9 top 10 </nuxt-link> 11 <!-- 終了 --> 12 <!-- aboutへのリンク --> 13 <nuxt-link 14 to="/about" 15 class="menu" 16 > 17 about 18 </nuxt-link> 19 <!-- 終了 --> 20 <!-- languageへのリンク --> 21 <nuxt-link 22 to="/language" 23 class="menu" 24 > 25 language 26 </nuxt-link> 27 <!-- 終了 --> 28 <!-- frameworksへのリンク --> 29 <nuxt-link 30 to="/frameworks" 31 class="menu" 32 > 33 frameworks 34 </nuxt-link> 35 <!-- 終了 --> 36 <!-- worksへのリンク --> 37 <nuxt-link 38 to="/works" 39 class="menu" 40 > 41 works 42 </nuxt-link> 43 <!-- 終了 --> 44 <!-- contactsへのリンク --> 45 <nuxt-link 46 to="/contacts" 47 class="menu" 48 > 49 contacts 50 </nuxt-link> 51 <!-- 終了 --> 52 </header> 53 </body> 54</template> 55 56<script> 57export default { 58 name:'Myheader' 59} 60</script> 61 62<style lang="css" scoped> 63/*問題のところ*/ 64body{ 65 margin:0; 66} 67/**/ 68.header-container{ 69 display: flex; 70 justify-content: space-around; 71} 72.menu{ 73 width:16%; 74 padding:20px; 75 text-align:center; 76 color:#34459e; 77} 78 79.menu:hover{ 80 background-color: rgb(255, 0, 0,0.6); 81 transition:0.3s; 82} 83 84 85</style>
vue
1<template> 2 <div> 3 <myheader /> 4 </div> 5</template> 6<script> 7import Myheader from '~/components/Myheader.vue' 8export default { 9 components:{ 10 Myheader 11 }, 12 layout:'default', 13 data(){ 14 return{ 15 title:"about" 16 } 17 }, 18 head(){ 19 return{ 20 title:this.title, 21 meta:[ 22 {hid:'discription', name:'discription', content: 'My custom description'} 23 ] 24 } 25 } 26} 27</script> 28<style> 29 30</style> 31
追記
vue
1<template lang="html"> 2 <!-- <div id="body">変更点 --> 3 <header class="header-container"> 4 <!-- topへのリンク --> 5 <nuxt-link 6 to="/" 7 class="menu" 8 > 9 top 10 </nuxt-link> 11 <!-- 終了 --> 12 <!-- aboutへのリンク --> 13 <nuxt-link 14 to="/about" 15 class="menu" 16 > 17 about 18 </nuxt-link> 19 <!-- 終了 --> 20 <!-- languageへのリンク --> 21 <nuxt-link 22 to="/language" 23 class="menu" 24 > 25 language 26 </nuxt-link> 27 <!-- 終了 --> 28 <!-- frameworksへのリンク --> 29 <nuxt-link 30 to="/frameworks" 31 class="menu" 32 > 33 frameworks 34 </nuxt-link> 35 <!-- 終了 --> 36 <!-- worksへのリンク --> 37 <nuxt-link 38 to="/works" 39 class="menu" 40 > 41 works 42 </nuxt-link> 43 <!-- 終了 --> 44 <!-- contactsへのリンク --> 45 <nuxt-link 46 to="/contacts" 47 class="menu" 48 > 49 contacts 50 </nuxt-link> 51 <!-- 終了 --> 52 </header> 53 <!-- </div>変更点 --> 54</template> 55 56<script> 57export default { 58 name:'Myheader' 59} 60 61</script> 62 63/* <style lang="css">変更点 */ 64/* 変更点 */ 65#body{ 66 margin:0; 67} 68.header-container{ 69 display: flex; 70 justify-content: space-around; 71} 72.menu{ 73 width:16%; 74 padding:20px; 75 text-align:center; 76 color:#34459e; 77 opacity:0.7; 78} 79 80.menu:hover{ 81 background-color: rgb(230,0,18,0.6); 82 opacity:1.0; 83 transition:0.3s; 84} 85 86</style>
書き直したのですが余白が解消されません、、、
ほかに考えられる原因はありますか??
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。