vue.jsプロジェクトの分割要素間のマージンを減らすにはどうすればよいですか？

Question

テキストと画像を含む分割要素を互いにどのように揃えるには？

これは、コードされる：

この分割要素はでなく、分割素子間のマージンすぎるparagaph要素および画像素子を含みます。

<template lang = "html"> 

<div class = ""> 

    <h1>{{ Help }}</h1> 
      <div class = "container"> 
     <div class = "row"> 


      <form> 
       <input type="text" name="search" placeholder = "Search : Tutorial, FAQS, Contacts "class = " form-control input-lg" height = ""> 
      </form> 


     </div> 
     </div> 

<div class = "container"> 

     <div class = "row"> 

        <h2>levi basics</h2> 

       <h3>What is levi?</h3> 

       <p class = "" id = "Headline"> levi is data curation software. This means that from <b>collection</b> to <b>sharing</b> to <b>analyzing</b> of data, levi refines each step in that process to provide wellbeing for institutions.</p> 


      <h3>How does levi function?</h3> 


<div class = "col-sm-4"> 

      <p class = "lead">levi receives data.</p> 


      </div> 

         <div class = "col-sm-4" id = "align"> 
            <p class = "lead">levi will analyse data over time to show the historical behaviour of your business. </p> 
            <img src = "../../assets/GraphAnalysis.png" alt = "GraphAnalysis" width = "200" height = "150" class = "Img"> 
         </div> 

       <div class = "col-sm-4"> 
          <p class = "lead">levi will share data with those who need it and help businesses collaborate with each other better!</p> 
          <img src = "../../assets/DataShare.jpg" alt = "GraphAnalysis" width = "300" height = "150" class = "Img"> 

       </div> 
     </div> 
</div> 

</div> 
</template> 

<script> 
export default { 
    name: 'Support', 
    data() { 
    return { 

     Help: 'How can levi Help?', 

    }; 
    }, 
}; 
</script> 

<style lang = "css" scoped > 

h1 { font-size: 90px; text-align: center; font-family: Heiti SC; font-weight: bolder; line-height: 1em; margin-top: 90px; } 

h2 { text-align: center; font-family: Heiti SC; font-size: 50px; } 

h3 { font-family: Heiti SC; margin-top: 50px; font-size: 60px; } 


input { 
    border: solid 1px 0; 
    box-shadow: none; 
    height: 60px; 

} 


input[placeholder = Search] { 
font-size: 90px; 

} 

#Headline { 
    font-size: 30px; 
    line-height: 1.2em; 
    font-family: Heiti SC; 
    font-weight: lighter; 
} 
</style> 

これはページがどのように見えるかについてのJSフィドルです。

JS fiddle Help page

Answer 1

あなたはそれが最高レベル<div></div>要素としてコンポーネント名を持つようにVUEのコンポーネント内で共通だmargin-bottom: 0;持つように初期のスタイルをリセットする必要があります。

あなたのCSSでは、pタグをすべてリセットすることができます。

上記の説明は、テンプレート内にあるすべてのp要素を、scope属性を使用して対象としています。あなたがコンポーネントCSSをオーバーライドするグローバルスタイルを持っている場合は、margin-bottom: 0 !important;を与える!important属性を追加する必要があります。これにより、上記のような通常の初期化スタイルよりも高い優先順位スタイルになります。