I don’t think there’s any particular reason other than showing what margin attribute can do. In and ideal situation, you would write it inside the yellow box, but I think here is just another example of what it could do.
hmmmm. do you think so? I would like to hear what others would say about it. Because as you said ideal situation i would write the code for margin text inside the div.
Maybe its another example as you said.
but i am wondering maybe it was done like that because it would not effect the appearance.
I changed the codes and placed the margin text inside the yellow box. I just needed to add a selector style for the margin text to be aligned center and adjust its margin to be closer to the upper border. Then played around with the red and blue box margin and padding size. I didnt see any problem.
Logically the code for the margin should be in div (yellow box). As you and i have noticed maybe it was just to show that you can play with text as well.
By not putting the h5 inside the yellow div, that text is not part of the contents of the div. The point of this exercise is to show the effects of margin on an element, so the blue and red divs fill 100% of the yellow div. Putting additional text in it would throw off the effect.
It is just an easier way to achieve the desired layout.
The negative margin makes sure it does not interact with the elements inside the box (so they don’t push on the element but on the box). It’s also compensating for the default margin on the body (pulling the box up) but whether or not that was the intention or just a side effect I can’t say.
Here is the same layout with the element inside the box (the negative margin is pulling the box up a bit more than just removing the margin on the body).
Yep. you are right. When i placed margin text inside the box it shifted the red and blue box.
But if i do it this way as shown below? When i play with the pixels of red and blue i don’t see any damage done.
let us say in future, in higher level codes. what would be better? For the margin to be inside the box or outside? Or it doesnt matter unless you get the effect you want? Will it effect the speed?
Well, you now your red box and blue box are h5 elements instead of divs, which is probably not what you would want in the real world.
This isn’t a situation that translates well to real use cases.
Speed really isn’t the issue with HTML. It’s about getting it to look and behave the way you want it to in every scenario, in a way that doesn’t require fussing every time you update something.
Thanks. Sorry for the late reply. I lost internet connection for 2 days. it was like walking in the desert without water .
I was going through your code. Cool commands you included. i had to check them out. Which made me learn new stuff. Many thanks
Few Querstions:
Why you place top-margin: 0 important! for the body?
Can you please explain the styling for the injected-text that you used.
.injected-text {
margin: 0;
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
}
What you think about the code below? Its is a simple code i made . Which ArielLeslie replied to Link to the Post
Because the original code pulls the box up, negating the top margin on the body. So instead I just removed it as I’m not pulling the box up.
Some code comments.
.injected-text {
/* remove default margin */
margin: 0;
/* remove the element from document flow so it does not interact
* with other elements and can be positioned using offsets */
position: absolute;
/* position it 5px from the top to have the same position as in the original code */
top: 5px;
/* center the element horizontally */
/* left of element box positioned at 50%, i.e. center of parent */
left: 50%;
/* pull the element back by 50% of its own width to center the element box */
transform: translateX(-50%);
}
With your code, the element’s margins are still interacting. It really depends on the desired layout and how flexible it has to be. Personally, if I had to add a label to a box and it wasn’t meant to interact with other elements inside the box, I would use absolute positioning to take the element out of document flow.
.