Member Avatar for ekka

hello guys.

I'm here to ask about margin and position properties with tow example :

the first is a misalignment (vertical --margin-- and horizontal --align-text-- ) of select tag, the problem is that I add align-text and margin-top properties in the CSS style, but it is invisible for the select tag, and visible for all other input tags.

in the second project you gonna notice, that when I make the four div in position absolute and I put left 0, the left div and top 0, the top div .... , and I put the input (search class) in -vertical-align: top- , the input is coming with top margin by default, I don't know why, but I think is not the input["text"] margin, the margin is a bottom margin of top div.

what i have tried :

I try to set margin-top to select tag with its class (another class CSS just for select tag), and I try to remove all CSS and put just form-control class from bootstrap, after I try to add position relative to the body and position absolute for input and select tags but this was a nightmare, so tell me about your propositions

thank you guys in advance for taking a look at the projects.

  • 3 Contributors
  • 6 Replies
  • 516 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ekka

Dani AI

Generated

Short diagnosis and practical fix. The behavior described is almost always caused by two things working together: browser/framework defaults for form controls, and the CSS cascade (which rule wins). In this thread correctly pointed out the display/layout differences, and 's flexbox suggestion is a simple, robust way to get consistent vertical alignment. The root cause in this case (confirmed later by ) was that Bootstrap's stylesheet was loaded after the custom stylesheet, so Bootstrap's rules simply overrode the author's rules.

Correct stylesheet order (Bootstrap first, then site CSS):

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/site.css">

A reliable layout pattern (avoid absolute positioning) is to group label+control rows with flexbox so vertical centering, spacing and consistent heights are handled by the container rather than each control:

.form-row {
  display: flex;
  align-items: center; /* vertical center */
  gap: 12px;
}
.form-row .form-control {
  height: 36px;
  box-sizing: border-box;
}

Quick troubleshooting checklist:

  • Open DevTools → Elements → Computed/Styles to see which stylesheet and selector set a property (crossed-out rules are overridden).
  • If a framework rule keeps winning, either load custom CSS after the framework or use a more specific selector (avoid overusing !important).
  • Clear cache or disable caching while testing.
  • Avoid layout with position:absolute for normal form flow; prefer flexbox/grid or Bootstrap's built-in form utilities for alignment.

Extra note: native <select> widgets are "replaced" by the browser and have platform-specific UI (the dropdown arrow, focus ring, etc.). For heavy visual customisation consider a controlled custom-select pattern or a small library—otherwise stick to height/box-sizing/padding and let the browser draw the control.

Recommended Answers

All 6 Replies

Member Avatar for gentlemedia

Hard to tell withou seeing any code, but here's some info:

A select element is an inline element which means it has by default the CSS decleration display: inline in the browsers' computed stylesheet.
Top/bottom margin and padding don't have effect on inline elements. Only left/right margin and padding. Do you want top/bottom margin and padding on the select element, then you will have to change the display to inline-block or block in your CSS (depending on your situation)

select { display: inline-block )

/* or */

select { display: block }

An input tag is also by default an inline element, but you say the top margin has effect on them, so you probably have somewhere in your (Bootstrap ???) CSS already input { display: block }

Furthermnore don't use position: absolute to lay out your form elements/tags or for any other layout. It''s doable, but it has many disadvantages. Use it only for small things if you have to.

align-text is not a CSS property unless you mean text-alignand the vertical-align property has only effect on the table tags thead, tbody, , th and td or elements with a CSS property of display: table-cell or display: inline-block.

Personally I use flexbox for layout, because I knid of have/want to support IE10+

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edited by gentlemedia because: added flexbox part
Member Avatar for ekka

here are the and the , and thanks guys , but it still not working with this :

input[type="email"] , input[type="password"] , input[type="text"] , select
{
    width : 80%;
    height : 30px;
    text-align : center;
    border : none;
    font-size : 1em;
    color: #313A3D;
    background-color: #E8E9EA;
    margin-top : 10px;
    display: inline-block;
}
select
{
    display : inline-block;
    margin-top : 30px;
}

any other ideas

Edited by ekka
Member Avatar for pty

Create a JS fiddle demonstrating your problem. Nobody wants to clone and set up a entire project.

Member Avatar for gentlemedia

I only had a look and see in project1 that you load first your own stylesheet and then the bootstrap stylesheet. Switch them!

Member Avatar for ekka

thank you it was my problem , when i switch them all it works ,thank you very much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.