html - border overlaps text above link -


html - snippet

<div class="row">     <div class="bot-text">         <!-- <?php dynamic_sidebar('footer'); ?> -->         <h1>titley title</h1>         <p> paragraph of text ...</p>          <a href="...">button text</a>     </div> </div> 

css

.bot-text {   position: relative;   padding: 50px 80px;   text-align: center; }     .bot-text p {   font-family: 'josefin sans', serif;   font-weight: 600;    font-size: 18px;   line-height: 26px;   color: #5d5d5d; }  .bot-text {   position: relative;   border: 1px solid #000;   padding: 20px; } 

a title , paragraph of text created link created underneath. have border on link padding, border overlays text above.

how can avoid this? want border push link down, not overlap text above

this because <a> elements inline, need block or inline-block level "takes space" , not go on elements. making inline-block work best here since want inline properties:

.bot-text {   position: relative;   display: inline-block;  // <-- add   border: 1px solid #000;   padding: 20px; } 

this noted in @dmitriy comment.


Comments

Popular posts from this blog

node.js - Using Node without global install -

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

java - Null response to php query in android, even though php works properly -