Dynamic margin using CSS

Question

I am having a Tab with text and circle. I have given 9px right margin between circle and text. Now the issue is when circle size increases I need to reduce margin to 3px. Is there any I can do with CSS or do I need to write JS for it.

enter image description here

.circle {
    border-radius: 11px;
    width: 22px;
    height: 22px; 
    margin-right: 9px;
}

Does it need to go to exactly 3px or anywhere from 3px - 9px? — Derek Story
– Derek Story, Commented Mar 19, 2015 at 1:38
I added an answer that should help if I understand correctly — Derek Story
– Derek Story, Commented Mar 19, 2015 at 1:54

Derek Story · Accepted Answer · 2015-03-19 01:58:41Z

2

Depending on if you need it to go exactly to 3px, or anywhere between 9px and 3px, you could give your content to the right an absolute position. This way the content will stay put when the circle expands or decreases: JS Fiddle

Note: The actual margins/pixels do not match the desired 3-9px margins - just an a example. Change the content in the circle to see how the gap changes.

.circle {
    display: inline-block;
    border: 1px solid black;
    border-radius: 50%;
    margin-right: 9px;
    padding: 10px;
    height: 30px;
    line-height: 30px;
}
.rightContent {
    position: absolute;
    left: 70px;
    top: 0;
    line-height: 70px;  
}

Otherwise, if you do need the margin to be exactly 3px or 9px depending on the content, you will need JS.

edited Mar 19, 2015 at 1:58

answered Mar 19, 2015 at 1:46

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Donald · Accepted Answer · 2015-03-19 01:42:17Z

0

Firstly, I would definitely not use JavaScript to alter CSS in this way. I would suggest floating your text to the right using float: right so that the space between the circle/oval and text can be variable based on the width of the circle.

answered Mar 19, 2015 at 1:42

Donald

1,22013 silver badges23 bronze badges

Collectives™ on Stack Overflow

Dynamic margin using CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related