CODEWITHSUNDEEP
htmlcss
Asha Devyani
Asha Devyani

Reputation: 21

Size of square changes upon adding text

This is the HTML:

<a href="#" class="square1"></a>

The css corresponding to that is:

a.square1
{
    width: 50%;
    height: 50%;
    border: 1px solid transparent;
    padding: 9%;
    margin-top: 0%;
    background-color: #FAFAFA;
    opacity: 0.5;
}

When I try to put text inside of it, the size of the square changes. How can I avoid that?

Upvotes: 0

Views: 126

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

First of all, your anchor element is not square. Giving width: 50% and height: 50% doesn't make it square. It just calculates the width and height of the element related to its parent element. You should provide fixed values instead of percentage values. and also convert the inline anchor element to block element by using display: block.

a.square1
{
    width: 100px;      /* fixed value */
    height: 100px;     /* fixed value */
    border: 1px solid red;
    padding: 9%;
    display: block;    /* converted to block element */
    margin-top: 0%;
    background-color: #FAFAFA;
    opacity: 0.5;
}

Working fiddle

The layout seems to be responsive square element because of padding value in percentage, because padding top or bottom values in percentages are respective to width instead of height.

Note: You can also use vh/vw units (works in modern browsers). The fallback for using is that it will work whether with width resizing or height resizing, but not for both dimensions resizing.

For example:

width: 20vh; height: 20vh; //works for height resizing

and 

widdth: 20vw; height: 20vw; //works for width resizing

Upvotes: 1

iProgramApps
iProgramApps

Reputation: 53

When I made a few test websites; the buttons sizes (without any editing whatsoever) were mainly dependant on the length, and font-size of the text. You may need to change the text's font to fix this problem.

To add a text ( I think you know this, but just to clarify )

<p id="IDHERE" style="font-size:50%">TextHere</p>

You can add more CSS code; just make sure that is small enough.

Upvotes: 0

Related Questions