CODEWITHSUNDEEP
cssreactjs
Canovice
Canovice

Reputation: 10163

css - remove white space below anchor tag

See if i can get it working here: https://codepen.io/canovice/pen/pVoBXJ

I have searched a bit for this answer but have had no luck resolving the issue. Here is a screenshot of an anchor tag in a react component of mine:

enter image description here

Notice the 3px margin (orange) and 3px padding (green), and also notice that below the text is a massive amount of white space that I would like to get rid of, but am struggling to do so. Any help is appreciated.

*Note: I've tried the suggestions at this link here with no luck...

*Edit: let me know if theres more i can share on my app, ie. the current stylings, that will help.

Javascript for the React component:

import React from 'react';
import FaTwitter from 'react-icons/lib/fa/twitter';

import './TopPageHeader.css'

const TopPageHeader = () =>

    <div className="top-page-container">
        <a href="/">Canova's Analytics Dashboards</a>

        <div className="social-links">
            <a href="https://twitter.com/SmokeyCanova">
                <FaTwitter />
            </a>
        </div>
    </div>

export default TopPageHeader;

and CSS:

.top-page-container {
    padding: 15px 20px;   
    margin: 0;
    min-height: 30px;
    height: auto;
    width: 100%;
    border-bottom: 1px solid #000;

    display: flex;
    justify-content: space-between;
}

.top-page-container a {
    /*display: block;*/
    /*height: auto;*/
    vertical-align: bottom;
    padding: 3px;
    margin: 3px;
    font-size: 1.75em;
    /*padding: 15px 0px;*/
    color: #000;
}

.top-page-container .social-links {
    font-size: 1.75em;
    /*padding: 15px 0px;*/
}

Lastly, here's what the component looks like on the top of my page. Canova Analytics Dashboard is not centered, but rather offcenter up a bit (due to this extra white space below the anchor tag)... Ideally, the vertical center of the text, and the vertical center of the twitter logo, would both be vertically centered on the div they are contained in.

enter image description here

Here's what the component is contained within... This is a top page header component, and hence nothing before it. I don't think the css is being impacted anywhere else, but i could be wrong.

enter image description here

Upvotes: 0

Views: 3162

Answers (2)

fubar
fubar

Reputation: 17388

You're using flexbox on your .top-page-container element, with a min-height. This is then correctly forcing the child element to occupy the full container height.

Add the align-items property of .top-page-content with something like flex-start, center, etc.

.top-page-container {
    padding: 15px 20px;   
    margin: 0;
    min-height: 30px;
    height: auto;
    width: 100%;
    border-bottom: 1px solid #000;
    align-items: flex-start; // <-- add this
    display: flex;
    justify-content: space-between;
}

.top-page-container a {
    /*display: block;*/
    /*height: auto;*/
    vertical-align: bottom;
    padding: 3px;
    margin: 3px;
    font-size: 1.75em;
    /*padding: 15px 0px;*/
    color: #000;
}

.top-page-container .social-links {
    font-size: 1.75em;
    /*padding: 15px 0px;*/
}
<div class="top-page-container">
    <a href="/">Canova's Analytics Dashboards</a>

    <div class="social-links">
        <a href="https://twitter.com/SmokeyCanova">
            <FaTwitter />
        </a>
    </div>
</div>

Upvotes: 1

Hamed Adil
Hamed Adil

Reputation: 483

Play with the line-height CSS property.

For example set it to 1 or 0.

You haven't provide any example code though.

Upvotes: 1

Related Questions