Difference between revisions of "Team:IISER Berhampur"
| Line 688: | Line 688: | ||
} | } | ||
| − | + | Why this happens? | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions: | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | Change the display from inline to other - add display: block for instance | |
| − | + | ||
| + | Change the vertical-align property to top (default is baseline) | ||
| + | |||
| + | Shrink the text size to 0 by font-size: 0 on the containing block of the inline element. | ||
| + | |||
| + | Example | ||
| + | |||
| + | Add vertical-align: top to all the three images - see updated fiddle here and snippet below: | ||
| + | |||
| + | #image-1 img, | ||
| + | #image-2 img, | ||
| + | #image-3 img { | ||
| + | background-color: #00f; | ||
| + | vertical-align: top; | ||
| + | } | ||
| + | .image-1, | ||
| + | .image-2, | ||
| + | image-3 { | ||
| + | display: block; | ||
| + | } | ||
| + | .Wrapper { | ||
| + | vertical-align: middle; | ||
| + | display: block; | ||
} | } | ||
| Line 761: | Line 774: | ||
<div class="footer-right"> | <div class="footer-right"> | ||
<p class="footer-company-about"> | <p class="footer-company-about"> | ||
| − | <span> | + | <span>About Us</span> |
| − | + | We are team Frappe building things without money. </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
</footer> | </footer> | ||
Revision as of 15:13, 2 October 2020
