CODEWITHSUNDEEP
cssborderhtml
Bonjour
Bonjour

Reputation: 137

A border in a div

I made a span in a div. This span is only a black border, positioned above the div. I want this span (black border) adapts to the div width and height. Like a border in interior to this div.

My problem is that border exceed the div : http://jsfiddle.net/QHRYJ/

div {
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    width: inherit; 
    border: 4px solid;
    margin: 10px;
    height: inherit;
}

-->-->-->--> *EDIT : what I want : http://www.hostingpics.net/viewer.php?id=623039div.png*

Upvotes: 1

Views: 103

Answers (2)

BenM
BenM

Reputation: 53198

I think you have an XY Problem here.From what you've described in the comments (adding a border to the <div> on hover), you don't need a <span> element for that. You can achieve this using the :hover pseudo-selector. For example:

div:hover {
    border: 4px solid #000
}

Here's a jsFiddle Demo

You might want to specify box-sizing on the <div> to prevent it from resizing:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Upvotes: 1

pdu
pdu

Reputation: 10413

The comments speak for themselves, however, if you still want to achieve it your way:

div {
    position: relative;
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    top:0 ;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid;
}

You need to give your parent div a position so its child elements orientate themselves on its parent. Then, as your span is absolutely positioned, you can just expand it by explicitly setting left, right, bottom and top to 0.

If you want to have a spacing between span and div, add margins to the span.

Upvotes: 3

Related Questions