CODEWITHSUNDEEP
javascriptcss
Fallenreaper
Fallenreaper

Reputation: 10704

Creating a colored margin without changing DOM, because border affects the markup like padding

I was trying to see if there was a way to do something like changing the color of margins in CSS, without changing the DOM, but i am unsure as to how to figure it out. Margin itself takes only things like "auto|inherit|number (px|$|vs|vh)" so i did not know if it was a combination of a few things.

How would i accomplish such a thing?

My bet seems to be on actually doing DOM manipulation.

Is my goal achievable with CSS alone?

My reasoning is that i am doing some scaling for a visual demo, and want to add a black border, similar to that of IPads and other Tablets. The issues i noticed is that adding a border which scales everything a little more (not what i wanted).

The reason why i am tagging javascript is because there might be a trick within javascript, outside the scope of css that would resolve the issue (while not changing DOM around).

Is this possible? Had anyone ever tried this?

Upvotes: 0

Views: 43

Answers (1)

brbcoding
brbcoding

Reputation: 13586

You can create colored borders without using any extra dom elements... You have a couple of different options -- probably more.

Using box shadow: 

.foo {
    width: 250px;
    height: 250px;
    background: green;
    box-shadow: 0 0 0 10px black;
}

Using a linear gradient on a pseudo-element: 

.bar {
    margin-top: 50px;
    width: 250px;
    height: 250px;
    background: orange;   
}

.bar:before {
    content: '';
    position: absolute;
    width: 250px;
    height: 50px;
    background: linear-gradient(90deg, #000, #000)
}

DEMO

Hopefully I'm not misunderstanding what you're after...

Upvotes: 1

Related Questions